项目开发中不同的系统经常遇到重复的自定义指令、组件等,直接复制代码比较冗杂,且如果需要改动,需要每个系统都改动一遍,非常不灵活。而将这些共通的部分封装成一个插件,使用时直接引用即可,大大减少冗余代码,优化代码结构。
vue开发插件要暴露一个install方法,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
以下是Vue官方提供的不同插件的开发方式。
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
发布插件
1.打包
创建一个单独的vue-cli项目,根目录建一个packages文件,放入插件文件包(注意,一定是完整的,引用到的方法也要加上)。如下图:
package.json中添加script命令:
"scripts": {
"build:lib": "vue-cli-service build --target lib --name loadmore --dest lib packages/loadmore/index.js"
}
编译组件,拿到lib文件。
2.准备发布
首先需要在 package.json 添加组件信息
name: 包名,该名不能和已有的名称冲突;
version: 版本号,不能和历史版本号相同;
description: 简介;
main: 入口文件,应指向编译后的包文件;
keyword:关键字,以空格分割;
author:作者;
private:是否私有,需要修改为 false 才能发布到 npm;
license:开源协议。
{
"name": "@tina/loadmore",
"version": "1.0.1",
"descrption":"loadmore based on vue.js that can load more data while scroll down",
"main":"lib/loadmore.umd.min.js",
"license": "MIT",
"author":"Tina",
}
3.设置忽略文件
创建 .npmignore 文件,设置忽略文件
该文件的语法和 .gitignore 的语法一样,设置发布到 npm 时忽略哪些目录或文件
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
发布到npm
如果以前改过 npm 的镜像地址,比如使用了淘宝镜像,就先改回来
npm config set registry http://registry.npmjs.org
如果没有 npm 账户,可以通过 npm adduser 命令创建一个账户,或者到 npm 官网注册
如果在官网注册的账户,或者以前就有账户,就使用 npm login 命令登录
具体流程可以参考官方文档
发布成功后就可以在项目中直接通过npm install --save packname安装,使用Vue.use命令注册,即可使用。