由於很多組件需要在不同的項目中復用，考慮到維護成本，這段時間寫了個vue cli3進行組件封裝，並上傳到npm；
環境搭建和項目初始化
1）若電腦上沒有安裝過nodejs，首先需要從官網下載https://nodejs.org/安裝包，並進行安裝
檢查電腦是否有安裝nodejs，打開命令行工具，輸入node -v,例如如下，代表已經安裝了node：
2）安裝vue/cli
安裝之后，你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。
你還可以用這個命令來檢查其版本是否正確：
3）使用Vue CLI3來初始化項目
按住鍵盤的上下箭頭可以選擇，但是我的電腦上選擇不了，查了下資料眾說紛紜，一個簡單的辦法是在vscode的終端執行，便可以進行選擇；
4）安裝element ui
執行命令 vue add element
按照自己的需求是選中按需引入還是全部引入，由於我們是基於element-ui的部分組件做的二次封裝，所以最好還是按需引入所依賴的組件比較好；
這樣在項目中src下，就會新建一個plugins文件夾，里面有個element.js 文件，如果想手動引入，就在這里添加要依賴的組件，這里是為了調試組件：
import Vue from 'vue' import { Button, Dialog } from 'element-ui' Vue.use(Button) Vue.use(Dialog)
編寫組件
和src同級目錄，新建 packages 目錄，在這里添加自己封裝的要發布的組件。
例如，新建 YtoModal 文件夾，再接着新建 src 文件夾，里面新建 YtoModal .vue，在這里寫組件的代碼：
<template>
<div class="s-dialog">
<el-dialog :title="title" :visible.sync="dialogVisible" width="683px">
<img :src="imgUrl" />
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>確 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'YtoModal',
props: {
visible: {
type: Boolean,
default: () => { return true; }
},
imgUrl: {
type: String,
default: 'http://dimg07.c-ctrip.com/images/100o1f000001gp6di1DB0_C_221_166.jpg'
},
title: {
type: String,
default: '測試'
}
},
data () {
return {
dialogVisible: this.visible,
form: {
wayNo: '',
name: ''
}
};
},
watch: {
visible (val) {
this.dialogVisible = val;
},
dialogVisible (val) {
this.$emit('update:visible', val);
}
},
created () {
this.dialogVisible = this.visible;
},
mounted () {
},
methods: {
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
</style>
在YtoModal 目錄下新建index.js,里面注冊單獨的該組件，方便使用時可以單獨引用：
import YtoModal from './src/YtoModal' YtoModal.install = function (Vue) { Vue.component(YtoModal.name, YtoModal) } export default YtoModal
這樣一個組件就添加完成了，然后需要在 packages 的根目錄下添加一個總的 index.js，這里是全局注冊的地方，使用時可以全局引入，其實就跟 element-ui 的兩種方式一樣：
import YtoModal from './YtoModal'; const components = [ YtoModal ]; const install = function (Vue) { components.forEach(component => { Vue.component(component.name, component); }); }; if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { install, YtoModal };
后面再添加組件，在這里也要再注冊一下，而element-ui 源碼中是動態引入的，我們的項目組件還沒那么多，可以先一個個手動引入，如果后面數量多了，不好維護，可以參考 element-ui 的源碼實現
調整目錄
我們需要一個目錄存放組件，一個目錄存放示例
把src目錄重命名為examples用作示例展示，例如：
我們通過上一步的目錄改造后，會遇到兩個問題。
- src 目錄更名為 examples ，導致項目無法運行
- 新增 packages 目錄，該目錄未加入 webpack 編譯
注：cli3 提供一個可選的 vue.config.js 配置文件。如果這個文件存在則他會被自動加載，所有的對項目和webpack的配置，都在這個文件中。
重新配置入口，修改配置中的 pages 選項，支持對 packages 目錄的處理，修改配置中的 chainWebpack 選項，vue.config.js完整的代碼如下：
module.exports = { lintOnSave: false, // 關閉eslint檢查 // 修改 src 為 examples pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, // 強制內聯CSS css: { extract: false }, productionSourceMap: false, // 擴展 webpack 配置，使 packages 加入編譯 chainWebpack: config => { config.module .rule('js') .include .add('/packages') .end() .use('babel') .loader('babel-loader') .tap(options => { // 修改它的選項... return options; }); }, // 代理服務器配置 devServer: { open: true, hot: true } };
配置npm
在 package.json 里面的 script 里面加一個 lib選項，方便每次構建：
以下我們在 scripts 中新增一條命令 npm run lib
- --target : 構建目標，默認為應用模式。這里修改為 lib 啟用庫模式。
--name后面是你最后想要生成文件的名字- --dest : 構建的目錄，默認 dist 。這里我們改成 lib
- [entry] : 最后一個參數為入口文件，默認為 src/App.vue 。這里我們指定編譯 packages/ 組件庫目錄。
"scripts": { "lib": "vue-cli-service build --target lib --name test-pc-ui --dest lib ./packages/index.js" },
執行編譯庫命令
npm run lib
然后在 package.json 里面添加一些npm包發布的相關信息，比如作者、版本等：
其中最重要的是：
"main": "lib/test-pc-ui.common.js",
這里的路徑要和上面構建出來的目錄和文件名對應上。
以下參考設置：
{ "name": "test-pc-ui", "version": "1.1.1", "description": "基於 Vue 彈框", "main": "lib/test-pc-ui.common.js", "keyword": "彈框", "private": false }
添加 .npmignore 文件，設置忽略發布文件
我們發布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發布的。所以我們需要設置忽略目錄和文件。
和 .gitignore 的語法一樣，具體需要提交什么文件，看各自的實際情況。
登錄npm
首先需要到 npm 上注冊一個賬號，注冊過程略。
如果配置了淘寶鏡像，先設置回npm鏡像：
npm config set registry http://registry.npmjs.org
然后在終端執行登錄命令 npm login，輸入用戶名、密碼、郵箱即可登錄。
發布npm
執行命令 npm publish
如果在發布過程中遇到以下錯誤，則是郵箱沒有驗證
把郵件驗證成功啦，再次上傳就可以了
組件的使用
現在已經把寫好的組件發布到npm上了，那么如何使用組件了？假如組件名為test-pc-ui
1）直接在原來的項目中使用 npm i test-pc-ui
2) 在main.js中引入並注冊
import TestPcUi from 'test-pc-ui'; Vue.use(TestPcUi); // 注冊測試組件
這樣在別的頁面就可以直接用，例如：
參考文檔：
https://segmentfault.com/a/1190000016927695