将自己写的组件封装成类似element-ui一样的库，可以cdn引入

在写好自己的组件之后

第一步修改目录结构

　　在根目录下创建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

参考：https://www.jb51.net/article/148692.htm

巴特西

将自己写的组件封装成类似element-ui一样的库，可以cdn引入

最新文章

热门文章