一.使用vuecli3創建項目
vue create svgicon
二.修改目錄，開發組件前的准備
把src目錄改為examples作為查看組件的演示目錄，新建packages目錄作為組件編寫的目錄。
在packages下新建index.js作為導出組件入口，作為整個組件庫的導出，新建組件文件夾作為組件源碼的放置，比如我的組件目錄叫做 svg-icon ，在svg-icon文件夾下新建index.js文件對外提供對文件的引用，新建src文件夾並創建svg-icon.vue作為組件文件。整個packages文件夾下是如下的樣子：
在項目根目錄下新建vue.config.js並添加如下修改 src 目錄 為 examples 目錄
module.exports = {
// 修改 src 目錄 為 examples 目錄
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}
}
三.編寫組件
<template> <dir>一個新的svg-icon組件</dir> </template>
在packages/svg-icon/index.js導出組件
// 導入組件，組件必須聲明 name
import SvgIcon from './src/svg-icon.vue'
// 為組件提供 install 安裝方法，供按需引入
SvgIcon.install = function (Vue) {
Vue.component(SvgIcon.name, SvgIcon)
}
// 默認導出組件
export default SvgIcon
在packages/index,js 整合所有的組件，對外導出，即一個完整的組件庫
// 導入顏色選擇器組件
import SvgIcon from './svg-icon'
// 存儲組件列表
const components = [
SvgIcon
]
// 定義 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,
// 以下是具體的組件列表
SvgIcon
}
四.編寫示例
在 examples/main.js中引入寫好的組件
import Vue from 'vue'
import App from './App.vue'
// 導入組件庫
import SvgIcon from './../packages/index'
// 注冊組件庫
Vue.use(SvgIcon)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
在示例中 examples文件夾下 使用組件庫中的組件，在上一步用使用 Vue.use() 全局注冊后，即可在任意頁面直接使用了，而不需另外引入。當然也可以按需引入。
<template>
<div id="app">
<svg-icon icon-class="Abook" />
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
五.發布前的准備
在根目錄添加 .npmignore 文件，設置忽略發布文件。我們發布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發布的。所以我們需要設置忽略目錄和文件。
.DS_Store node_modules/ examples/ packages/ public/ vue.config.js babel.config.js *.map *.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
package.js 中新增一條編譯為庫的命令，vuecli3提供了一個構建目標庫的命令，可以查看官方文檔詳細了解：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93
vue-cli-service build --target lib --name myLib [entry]
- --target : 構建目標，默認為應用模式。這里修改為 lib 啟用庫模式。
- --dest : 輸出目錄，默認 dist 。這里我們改成 lib
- [entry] : 最后一個參數為入口文件，默認為 src/App.vue 。這里我們指定編譯 packages/ 組件庫目錄。
這里我添加的是：
...
"scripts": {
...
"lib": "vue-cli-service build --target lib --name vue-svgicon-coms --dest lib packages/index.js",
...
},
...
並在package.json中添加npm包的一些詳細信息,僅供參考：
"name": "vue-svgicon-coms", "version": "1.0.1", "author": "jason", "description": "vue-svg-components", "main": "lib/vue-svgicon-coms.umd.min.js", "keyword": "vue svg icon", "license": "MIT", "private": false
執行編譯：
npm run lib
然后可以看到編譯成功：
項目的根目錄也多了一個lib文件夾
六.注冊npm賬號
如果之前修改過npm源為淘寶鏡像，先改回為npm鏡像
npm config set registry http://registry.npmjs.org
使用npm賬號登錄
npm login
如果還沒有npm賬號，使用新建npm賬號
使用 npm adduser 命令創建 npm 賬號，會提示輸入用戶名/密碼/郵箱
然后在瀏覽器注冊時使用的郵箱，點擊注冊鏈接完成郵箱認證。
執行發布命令，發布組件到 npm
npm publish
七.發布成功
發布成功后稍等幾分鍾，即可在 npm 官網搜索到。以下是剛提交的 vue-svgicon-coms
八.更新npm包
每次修改完組件后，我們需要修改 package.json 的version版本
npm run lib npm public
也可以使用命令修改版本:
使用命令：npm version <update_type>進行修改，update_type 有三個參數，
第一個是patch, 第二個是minor,第三個是 major，
patch：這個是補丁的意思；
minor：這個是小修小改；
major：這個是大改動；
具體咋用：
比如我想來個1.0.1版本，注意，是最后一位修改了增1，那么命令：npm version patch 回車就可以了；
比如我想來個1.1.0版本，注意，是第二位修改了增1，那么命令： npm version minor 回車就可以了；
比如我想來個2.0.0版本，注意，是第一位修改了增1，那么命令： npm version major 回車就可以了；