在寫好自己的組件之后
第一步 修改目錄結構
在根目錄下創建package文件夾，用於存放你要封裝的組件
第二部
在webpack配置中加入
pages與publicpath同級
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
第三部 編寫組件
在package文件夾下
新建一個你的組件名的文件夾
里面存放一個你的組件的.vue文件
再新建一個js文件 用於將你的組件暴露出來
import Grid from './grid.vue'
// 為組件提供 install 安裝方法，供按需引入
Grid.install = function (Vue) {
Vue.component(Grid.name, Grid)
}
// 默認導出組件
export default Grid;
第四步 在package文件夾下新建一個js 文件（我命名index.js）
import Toolbar from './toolbar/index';
// 存儲組件列表
const components = [
Toolbar
]
// 定義 install 方法，接收 Vue 作為參數。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function (Vue) {
// 判斷是否安裝
if (install.installed) return
// 遍歷注冊全局組件
components.map(component => Vue.component(component.name, component))
}
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 導出的對象必須具有 install，才能被 Vue.use() 方法安裝
install,
// 以下是具體的組件列表
Toolbar,
}
最后一步
package.json文件中添加命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name my --dest lib packages/index.js"
},
最后運行 npm run lib 就發現多了一個lib文件夾 里面就存放的你打包好的js以及css