- 编写代码
- 打包
- 登录npm并publish
- 验证：第三方install并使用
==================== 编写代码 ====================
插件主文件夹下index.js
高端操作：
const requireComponent = require.context('./', true, /\.vue$/);
const install = (Vue) => {
if(install.installed) return;
install.installed = true;
requireComponent.keys().map(component => {
const config = requireComponent(component);
const componentName = config.default.name;
Vue.component(componentName, config.default||config);
})
}
export default install;
一般操作：
import msg from './msg/msg.vue';
let plugins = {};
plugins.install = function(Vue) {
// Vue.prototype.$msg = '我是msg';
/* Vue.prototype.$myMethod = function(str) {
console.log(str)
};
// 自定义指令
Vue.directive('focus', {
inserted: function(el) {
el.focus();
}
})*/
Vue.component(msg.name, msg);
}
export default plugins;
并定义一系列组件文件夹
==================== 打包 ====================
package.json中script加入（--name 的值必须和package.json中"name"值一致）
"lib": "vue-cli-service build --target lib --name vue-cli4-demo --dest lib src/plugins/index.js"
作用：将plugins下index.js单独打包到指定目录中，这里用的是vue-cli4的自带vue-cli-service，最终lib目录下会生成八个文件
=============== 登录npm并publish ===============
首先你要先去注册个账号 https://www.npmjs.com/
> npm login
> 输入用户名
> 输入密码
> 输入邮箱
> npm publish
publish之后在你的邮箱会受到新的邮件，打开并已读，再去新项目install，保证要先打开邮件再install
==================== 验证 ====================
新开其他项目install该插件
main.js中import进来，并Vue.use(新插件)，（全局调用方式）这一步会默认调用插件的install方法，之后就可以普通使用了，插件的css样式需要手动在Vue.use(新插件)之后import '../node_modules/新插件/lib/**.css'引入
