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

Posted 2022-01-08 mr-rshare

在写好自己的组件之后

第一步 修改目录结构

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