將本身寫的組件封裝成相似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