解决一个蛋疼问题：如何编写一个vue3插件：vue实现手册

本文主要介绍关于Javascript,vue.js,前端,自动化测试,程序人生的知识点，对【解决一个蛋疼问题：如何编写一个 vue3插件】和【vue 实现手册】有兴趣的朋友可以看下由【爱吃 香菜】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的自动化测试,软件测试,程序人生相关技术问题。

vue 实现手册

1 如何编写一个vue3插件

最近在使用vue编写前端项目时遇到一个蛋疼的问题。因为在项目中需要使用代码编辑框，所以使用了ace editor插件。但是突然插件中的cdn被墙，导致组件不能正确运行。

上网查了查，目前最流行的js编辑器就是ace和codemirror。特别是codemirror6，以模块的方式编写，可以直接在vue3项目中使用。为了方便使用决定封装一个插件，然后通过npm install的方式引入。

2 什么是插件

vue中的插件是自包含代码，通常是向Vue添加全局级功能。比如，添加一个全局函数，一个全局组件。插件可以是一个公开 install 方法的 object,也可以是 function。

所以，接下来我这里要开发的是一个组件。

3 如何编写插件

创建项目
前端打包工具太多，每种工具创建项目各有不同，写这篇文章的目的主要是科普一下vue3插件的开发流程，所以以最简单的方式进行，直接使用Vue CLI。运行命令：

vue create project

创建一个vue3的项目。因为开发的插件中不会用到 Vuex 和 Router，所以初始化项目是就不要选择了。

默认创建的vue项目的入口是 src 目录下的 main.js。修改 src 为 dev,到时候使用这里的代码来作为插件的测试demo。然后再创建一个 src 文件夹，并再其中创建 main.js 文件作为项目的入口。

4 修改入口配置

修改项目根目录下的package.json文件中的scripts 如下：

...  
"scripts": {
    "dev": "vue-cli-service serve dev/main.js",
    "build": "vue-cli-service build --target lib --name codeEditor src/main.js",
    "test:unit": "vue-cli-service test:unit"
  }
...

其中 dev 脚本是配置测试demo的启动，与正常的 vue 项目启动一致，只是修改了一下路径跟脚本名。

因为是开发的一个插件，打包时不能像普通vue项目一样打包成应用，而是要打包成库。Vue脚手架(Vue CLI)可以直接打包库，命令如下：

vue-cli-service build --target lib --name myLib [entry]

所以配置一个 build 脚本用来打包。

"build": "vue-cli-service build --target lib --name codeEditor src/main.js",

5 插件入口代码

import Component from '@/components'
export const install = (app, config) => {
    app.component(Component.name, Component)
    app.provide('codeEditor-global-config', config)
}

export const codeEditor = Component

export default {
    codeEditor,
    install
}

上面的代码可以作为组件插件的一个模板。

第1行代码是从src/components.js模块导入定义好的组件对象。

第2-5行代码是定义install方法，这是vue插件加载插件的钩子函数。当通过 app.use(插件) 添加插件时，如果传入的插件是个对象就会调用install方法，如果是一个function，则函数本身会被调用。并且这两种情况下，都会传入两个参数：由 Vue的createApp 生成的 app 对象，和用户传入的选项。所以上面代码中的 install 做了两件事情：

给传入的app对象添加了一个子组件，名字为Component.name,组件为Component,就是src/components.js模块中定义好的组件。
接受用户传入的配置项，并通过provide方法，通过keycodeEditor-global-config暴露出来，子组件中通过inject方法接收。

第6行代码是导出组件对象，供局部导入使用。

在dev/App.vue中可以通过如下代码局部导入使用：

第7-10行代码是导出一个包含组件和install方法，供全局导入使用。

在 dev/main.js 中可以通过如下代码全局导入使用：

import { createApp } from 'vue'
import App from './App.vue'
import CodeEditor  from "@/main";
createApp(App).use(CodeEditor,{dark:true,language:'python'}).mount('#app')

6 打包

插件编写完成后，运行npm run build即可完成打包，打包后会在项目根目录下生成dist文件夹，并生成文件

dist/yourLib.common.js:一个给打包器用的CommonJS包

dist/yourLib.umd.js:一个直接给浏览器或者AMD loader使用的UMD包

dist/yourLib.umd.min.js:压缩后的UMD构建版本

dist/yourLib.css:提取出来的css文件

7 如何发布到npm

写好的插件可以直接复制到项目中直接使用，也可以通过npm发布共享出来，通过npm install进行安装。非常简单步骤如下：

1.注册npm的账号，注册地址
https://www.npmjs.com/signup

2.编写package.json

在package.json中编写如下字段：

{
  "name": "@wcfdehao/code-editor",    # 插件名称
  "version": "1.0.0",  # 版本号
  "license": "MIT",  # 许可协议 
  "keywords": [  # 搜索关键词
    "codemirror",
    "vue3 codemirror",
    "vue3 code editor"
  ],
  "files": [  # 上传文件目录
    "dist"
  ],

}

3.发布

在项目根目录运行命令 npm publish 进行发布。如果是第一次，会提示你登录，输入你注册好的用户名密码即可。成功上传后，就可以通过 npm install 你的插件名称进行安装使用了。

现在我邀请你进入我们的软件测试学习交流群：【746506216】，备注“入群”， 大家可以一起探讨交流软件测试，共同学习软件测试技术、面试等软件测试方方面面，还会有免费直播课，收获更多测试技巧，我们一起进阶Python自动化测试/测试开发，走向高薪之路。

喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一 键三连哦！

本文《解决一个蛋疼问题：如何编写一个 vue3插件》版权归爱吃 香菜所有，引用解决一个蛋疼问题：如何编写一个 vue3插件需遵循CC 4.0 BY-SA版权协议。