分享｜思源笔记插件模板 - Vite & Vue3

维护了一下 Vue3 版本的 插件模板，地址：siyuan-note/plugin-sample-vite-vue

我个人更推荐使用 Vue 进行开发，跟写 html、css、js 基本上没区别。

顶部写结构，对应 html；

中间写逻辑，对应 js；

底部写样式，对应 CSS；

加上我最近也在写 React 项目，还是觉得 Vue 写起来是最舒服的。

仅维护了最基础的使用案例，代码示例可参考项目中的 App.vue 文件。

叶归插件基本上也是使用这套架构。所有的代码只需要从 App.vue 这个入口开始即可，跟写普通的 SPA（单页面应用） 项目基本上没区别。

不需要头疼每次使用 Vue 组件时，都得用 createApp 创建并挂着对应的组件，然后卸载时还得处理对应的组件。

当禁用插件时，会卸载掉 App.vue，自然会将内部的子组件全都卸载。

项目中添加了几个符合思源风格的基础组件，具体可参考 App.vue 文件。

PS：下面这个技巧，需要你给思源写过一些东东才能有感悟

一个小技巧，当你拿到页面的元素以后，你可以使用 Teleport 组件来决定你的代码究竟插入到思源的哪个位置，参考上图。

这样就不用每次给思源插入内容时，都需要使用 createApp，或者手写 html 字符串了。

下图是叶归格式刷功能中的部分代码，保留了响应性的同时，能正确的将格式刷按钮插入到思源的工具栏中。

未使用 Teleport 时，每次都需要使用这样的代码创建对应的元素。

并且还得使用这样的代码去实现样式的及时更新：

由于我自己用的 arco design 里有一些小问题存在，所以项目中没有添加 UI 库，如果需要的话，请自行添加。

参考：

package.json：

"clear-normalize": "echo > node_modules/@arco-design/web-vue/es/style/normalize.less && echo > node_modules/@arco-design/web-vue/lib/style/normalize.less",
​

vite.config.ts：

vitePluginForArco({
      style: true,
      modifyVars: {
        'font-family': 'var(--b3-font-family)',
      },
    }),
​