使用 Vue3 + vite + elementUI 开发一个 Utools Markdown 编辑器插件

目的

博主个人已经用了很久的 Utools 了，会员也续到了 2024 年，它跟随博主从 Deepin 到 Manjaro，再到 Windows 再到 MacOS，在很多场景下都非常方便，比如选中文本中键翻译、复制 JSON 后自动格式化、正则表达式匹配小工具、计算稿纸等。已推荐给很多同事、朋友使用，无不夸其高效便捷。

而在使用的同时，也想为社区出一份力，实现一些插件为自己为他人提供更多的便利，Utools 为实现多端兼容，主要使用 JS 开发插件，界面 UI 与组件交互与传统的 web 开发别无二致，只不过可以利用更多的系统能力去做传统 web 开发不能做到的事情。

开发文档整理

Utools 开发者文档：http://u.tools/docs/developer/welcome.html
ElementUI开发文档：https://element-plus.org/#/zh-CN/component/installation
Vue3 开发文档：https://v3.vuejs.org/guide/introduction.html
Vite 开发文档：https://vitejs.dev/config/

在开发者文档中，快速上手仅提供了原生 JS + utools 能力的调用结合，这篇文档的目标是将 Vue3 与 Utools 开发结合，并将国内比较流行的 ElementUI 框架集成在一起，最终会基于这些技术创造出一个简易的 Markdown 编辑器，Utools 上搜索 『清爽 Markdown 编辑器』 即可体验。

具体代码见：

Github：https://github.com/wangerzi/utools-vue3-markdown-editor

Gitee：https://gitee.com/wangerzi/utools-vue3-markdown-editor

界面效果如下：

还有一些优秀的开源插件可参考：

https://github.com/xiaou66/utools-pictureBed

https://github.com/xkloveme/utools-calendar

https://github.com/in3102/upassword

基础工具的集成

这一小节的目的主要是将业务框架和主要依赖安装好，为实现业务做准备。

空白项目只有一个 README.md 和 .gitignore

本阶段的配置和代码执行已放入 https://github.com/wangerzi/utools-vue3-markdown-editor/tree/element-template ，如果想基于同样的技术栈做研发，可以直接把代码下载下来改。

初始化项目

首先，这是一个 vue3 + vite 的项目，根据官方的 快速上手指引，在项目根目录下执行如下指令，注意对比执行结果和 node 版本

其中 mv utools-vue3-markdown-editor/* ./ 是因为项目初始化在子文件夹中，不在主目录初始化是因为会删除该目录所有文件，而空白项目中已经有 .git/README.md/.gitignore 了，初始化到本目录中，会导致这些数据被清理掉，规避风险所以创建在了子目录中。

$ node -v
v12.16.1

$ npm -v
6.13.4

$ npm init vite utools-vue3-markdown-editor -- --template vue
npx: 6 安装成功，用时 3.61 秒
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in D:\phpStudy\WWW\github\utools-vue3-markdown-editor\utools-vue3-markdown-editor...

Done. Now run:

  cd utools-vue3-markdown-editor
  npm install
  npm run dev

$ mv utools-vue3-markdown-editor/* ./

$ rm -rf utools-vue3-markdown-editor\

$ npm install

> esbuild@0.12.18 postinstall D:\phpStudy\WWW\github\utools-vue3-markdown-editor\node_modules\esbuild
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN utools-vue3-markdown-editor@0.0.0 No repository field.
npm WARN utools-vue3-markdown-editor@0.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {
   "os":"darwin","arch":"any"} (current: {
   "os":"win32","arch":"x64"})

added 57 packages from 78 contributors in 10.725s

3 packages are looking for funding
  run `npm fund` for details


$ npm run dev

> utools-vue3-markdown-editor@0.0.0 dev D:\phpStudy\WWW\github\utools-vue3-markdown-editor
> vite

Pre-bundling dependencies:
  vue
(this will be run only when your dependencies or config have changed)

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1375ms.

此时访问 http://localhost:3000/ 将会看到如下界面，表示项目初始化完成

框架引入

下一步引入 element 框架，主要参考 官方安装文档

执行如下指令

$ npm install element-plus --save
npm WARN utools-vue3-markdown-editor@0.0.0 No repository field.
npm WARN utools-vue3-markdown-editor@0.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {
   "os":"darwin","arch":"any"} (current: {
   "os":"win32","arch":"x64"})

+ element-plus@1.0.2-beta.70
added 9 packages from 6 contributors in 11.379s

4 packages are looking for funding
  run `npm fund` for details

按需引用和 SASS

由于 vite 、 webpack 等打包工具会用 tree-shaking 剔除未使用的代码，做按需引用可最大程度的利用此功能，减少打包体积。ElementUI 官方也提供了 element 按需引用的使用说明。

这一步的目的是安装 vite 的 style 引入插件，并安装 sass 和 sass-loader 以兼容 sass 的加载，执行如下指令：

$ npm install vite-plugin-style-import -D
npm WARN utools-vue3-markdown-editor@0.0.0 No repository field.
npm WARN utools-vue3-markdown-editor@0.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {
   "os":"darwin","arch":"any"} (current: {
   "os":"win32","arch":"x64"})

+ vite-plugin-style-import@1.1.1
added 22 packages from 10 contributors in 3.215s

5 packages are looking for funding
  run `npm fund