- 編寫代碼
- 打包
- 登錄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'引入
