推荐一款好用且免费的笔记软件 Obsidian
Obsidian是一款强大的笔记软件，它支持Markdown格式，可以帮助你更好地组织和链接你的思想。
界面效果图
Obsidian简介Obsidian 是一款免费的笔记软件，它的主要特点包括：
链接思维：Obsidian 允许你创建笔记并通过链接将它们连接起来，形成一个你的知识网络。
Markdown 支持：Obsidian 支持 Markdown 格式，你可以使用 Markdown 语法来编写和格式化你的笔记。
强大的搜索功能：Obsidian 提供了强大的搜索功能，你可以快速找到你的笔记。
图形视图：Obsidian 提供了图形视图，你可以在图形视图中看到你的笔记之间的链接关系。
插件支持：Obsidian 支持插件，你可以安装插件来扩展 Obsidian 的功能。
……
使用指南基本配置通过官网 obsidian.md 下载客户端，根据提示安装。Obsidian的配置项非常多，初次使用只需要关注下面三点配置即可：
配置客户端语言：
打开设置面板（快捷键：Ctrl + ,）。
选择General。
在Language中选择你的语言。
点击Relaunch重新启动应用。
...
vue 创建全局方法
在Vue中，可以通过Vue.prototype添加全局方法或属性。需要注意的是，Vue会把所有在Vue.prototype上添加的属性和方法都定义在Vue的原型上，这样可以让所有的Vue实例共享这些属性和方法。
将方法挂载到 Vue.prototype 上这种方式最直接,可以在 main.js 入口文件中进行配置:
// main.jsimport Vue from 'vue'import App from './App.vue'// 定义全局方法Vue.prototype.$globalMethod = function() { // 方法体}new Vue({ render: h => h(App)}).$mount('#app')
之后在任何组件中都可以通过 this.$globalMethod() 来调用该方法。
利用全局混入 (mixin)// mixin.jsexport default { methods: { globalMeth ...
简单实现禁止调试前端页面代码
由于前端页面会调用很多接口，有些接口会被别人爬虫分析，破解后获取数据为了杜绝这种情况，最简单的方法就是禁止人家调试自己的前端代码
要禁止别人调试自己的前端页面代码,主要有以下几种方案:
无限debugger这是最常见的方法,通过不断执行debugger语句来疯狂输出断点,从而阻止代码调试。基础代码:
(() => { function ban() { setInterval(() => { debugger; }, 50); try { ban(); } catch (err) {} }})();
禁止断点将setInterval中的debugger代码写在一行,就能禁止用户添加断点,即使添加logpoint为false也无用。
(() => { function ban() { setInterval(() => {debugger;}, 50); t ...
css实现当文本内容过长，中间显示省略号，两遍正常显示
思路解析
文字内容的父级标签li设置line-height: 2;、overflow: hidden;、height: 2em;，因此 li 标签的高度是当前元素字体大小的2倍，行高也是当前字体大小的2倍，同时内容若溢出则隐藏。
li 标签内部有两个 span 标签，二者的作用分别是：类名为.txt的标签用来展示不需要省略号时的文本，类名为.title用来展示需要省略号时的文本，具体是如何实现的请看第五步。
给.title设置伪类before，将伪类宽度设置为50%，搭配浮动float: right;，使得伪类文本内容靠右，这样设置后，.title和伪类就会各占父级宽度的一半了。
.title标签设置text-align: justify;，用来将文本内容和伪类的内容两端对齐。
给伪类before设置文字对齐方式direction: rtl;，将伪类内的文本从右向左流动，即right to left，再设置溢出省略的css样式就可以了。
.title标签设置了top: -4em,.txt标签设置max-height: 4em;这样保证.title永远都在.txt上面，当内容足够长，.t ...
vue中使用echarts刷新可以正常渲染，路由跳转不显示
在 Vue 中使用 ECharts 组件时，遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因。当你从一个页面切换到另一个页面时，旧页面上的组件会被销毁，并在新页面上重新创建。
<template> <div> <div ref="chartContainer"></div> </div></template><script>import echarts from 'echarts';export default { data() { return { myChart: null, }; }, mounted() { this.initChart(); }, methods: { initChart() { const chartContainer = this.$refs.chartContain ...
推荐几款小而美的前端库
整理几款小而美的前端库，接入成本很低又能满足日常开发需求，同时无论是 npm 方式引入还是直接复制到本地使用都可以。
radashradash是一个实用的工具库，提供更多新功能（tryit，retry 等函数），源码可读性高。同时支持 TypeScript，并且旨在提供强大的函数来解决 JavaScript 中的现代问题。
use-debounceuse-debounce是一个 React Hook Debouce 库，它的体积小，不到1KB，与 underscore / lodash impl 兼容，一次学习，随处使用，并且服务器渲染友好。
timeago.jstimeago.js是一个格式化日期时间库，它非常简洁、轻量级，不到2KB。能够将 datetime 时间转化成类似于“3小时前”的描述字符串，同时支持多语言、自动实时更新、npm 方式和浏览器 script 方式，并且测试用例完善，执行良好。
react-usereact-use是一个强大的 React Hook 库，提供了各种工具函数和副作用钩子，如 createMemo、useToggle、useBoolean ...
vue 渲染函数
在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。
在Vue中，可以使用渲染函数（render function）来创建Vue组件。渲染函数提供了一种强大的方法来动态构建Vue组件的DOM渲染。
下面是一个简单的例子，使用渲染函数创建一个显示”Hello, Vue!”的组件：
Vue.component('hello-component', { render: function (createElement) { return createElement( 'div', 'Hello, Vue!' ); }});
或者使用ES6的箭头函数简化代码：
Vue.component('hello-component', { render: (createElement) => createElement( ...
uni-app分包教程
为什么要分包？因为小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
Uni-app分包的教程可以参考以下步骤：
在原应用的pages目录同级目录下创建新的目录，例如命名为package1，根据需要创建更多这样的目录，例如package2、package3等。
将想要包含在分包中的模块复制到新创建的目录中，这些模块原本位于pages目录中。如果需要，可以创建一个pages目录，但不是必须的。
修改manifest.json文件，增加“optimization”配置，设置“ subPackages `”为true，以开启分包优化。
修改pages.json文件，在pages.json中添加一个名为“ subPackages ”的数组，其中包含“root”和“pages”两个参数，“root”指定子包的根目录，“pages”指定子包包含的页面。
访问分包中的页面时，可以通过构建一个URL来完成，该URL由分包的根目录和路径组成，例如，要访问package1中pages目录下的myDaily页面，可以使用以下代码：uni.navigateTo ...
pinia和vuex区别
Pinia 和 Vuex 都是Vue.js的状态管理库，但它们在设计、功能和使用方式上有一些关键的区别：
设计理念：
Pinia是一个轻量级的状态管理库，专注于提供一个简单的API来管理应用程序的状态。它基于Vue 3的Composition API构建，这使得它更加灵活和可组合。
Vuex则是一个更完整的状态管理库，提供了模块化、插件和严格模式等功能。它基于Vue 2的Options API构建，因此在某些方面可能会受到限制。
状态管理方式：
Pinia采用了类似于React Hooks的方式来管理状态，使用state、getters和action来修改state数据，没有mutation的概念。
Vuex采用了一种基于mutations和actions的方式来管理状态，这可能需要更多的代码来实现相同的功能。
实例化支持：
Pinia支持多个store实例，这使得它更加灵活，适合于大型应用程序。
Vuex只支持一个store实例，可能不太适合需要多个独立状态管理的场景。
生态和稳定性：
Pinia是一个相对较新的状态管理库，因此它的生态系统可能不够完善，可能存在一些 ...
vue的Class 与 Style 绑定
在Vue中，绑定class和style可以通过对象语法或数组语法来实现。 对象语法适用于静态类名，数组语法适用于条件类名。
绑定静态类名：<div v-bind:class="{ active: isActive, 'text-success': hasSuccess }"></div>
export default { data() { return { isActive: true, hasSuccess: false } }}
绑定条件类名数组：<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
export default { data() { return ...
