在写好自己的组件之后
第一步 修改目录结构
在根目录下创建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
