安裝依賴
yarn global add @vue/cli
vue create qiyun-el-ui
vue ui
安裝element-ui
這里使用官方提供的的插件安裝：
http://element.eleme.io/#/zh-CN/component/quickstart#shi-yong-vue-cli-at-3
https://github.com/ElementUI/vue-cli-plugin-element
這樣在項目中撒妈，就會新建一個plugins文件夾违崇，里面有個element.js 文件急迂，如果想手動引入，就在這里添加要依賴的組件端蛆，這里是為了調試組件：
importVuefrom'vue'
import{
Button,
Dialog
}from'element-ui'
Vue.use(Button)
Vue.use(Dialog)
由于我們是基于element-ui的部分組件做的二次封裝刽漂，所以最好還是按需引入所依賴的組件比較好眨层。
編寫組件
在src的同級下面新建packages目錄锁右，在這里添加自己封裝的要發(fā)布的組件。
例如很魂，新建?qe-modal?文件夾扎酷，再接著新建?src?文件夾，里面新建?qe-modal.vue遏匆，在這里寫組件的代碼：
<template>
<el-dialog
:title="title"
:visible="dialogVisible"
@close="$emit('update:dialogVisible', false)"
:width="width">
<slot name="modal-body"></slot>
<div slot="footer" class="dialog-footer">
<slot name="modal-footer">
<el-button @click="$emit('update:dialogVisible', false)" size="small">取 消</el-button>
<el-button type="primary" @click="$emit('confirm')" size="small" :disabled="confirmDisable || beforeSendDisable">{{ beforeSendDisable? "處理中..." : "確 定" }}</el-button>
</slot>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'qeModal',
props: {
dialogVisible: Boolean,
title: String,
width: {
type: String,
default: '580px'
},
beforeSendDisable: {
type: Boolean,
default: false
},
confirmDisable: {
type: Boolean,
default: false
}
}
}
</script>
在?qe-modal?根目錄下新建?index.js?法挨，里面注冊單獨的該組件，方便使用時可以單獨引用：
importqeModalfrom'./src/qe-modal'
qeModal.install =function(Vue){
Vue.component(qeModal.name, qeModal)
}
exportdefaultqeModal
這樣一個組件就添加完成了幅聘，然后需要在?packages?的根目錄下添加一個總的?index.js凡纳，這里是全局注冊的地方，使用時可以全局引入帝蒿，其實就跟?element-ui?的兩種方式一樣：
importqeModalfrom'./qe-modal'
constcomponents = [
qeModal
]
constinstall =function(Vue){
components.forEach(component=>{
Vue.component(component.name, component);
});
}
if(typeofwindow!=='undefined'&&window.Vue) {
install(window.Vue);
}
exportdefault{
install,
qeModal
}
后面再添加組件荐糜，在這里也要再注冊一下，而element-ui?源碼中是動態(tài)引入的葛超，我們的項目組件還沒那么多暴氏，可以先一個個手動引入，如果后面數量多了绣张，不好維護答渔，可以參考?element-ui?的源碼實現，我在這里做了一些簡單的解釋胖替。
配置 npm
在 package.json 里面的 script 里面加一個 lib選項，方便每次構建：
"scripts": {
// ...,
"lib":"vue-cli-service build --target lib --name qiyun-el-ui --dest lib ./packages/index.js"
},
其中?--name?后面是你最后想要生成文件的名字，并用?--dest lib?修改了構建的目錄独令。
然后在?package.json?里面添加一些npm包發(fā)布的相關信息端朵，比如作者、版本等：
其中最重要的是：
"main": "lib/qiyun-el-ui.common.js",
這里的路徑要和上面構建出來的目錄和文件名對應上燃箭。
里面的配置項冲呢，在網上找了個例子：
{
"name":"maucash",
"description":"maucash中常用組件抽取",
"version":"1.0.2",
"author":"kuangshp <dmcdodo@163.com>",
// 開源協(xié)議
"license":"MIT",
// 因為組件包是公用的，所以private為false
"private":false,
// 配置main結點招狸，如果不配置敬拓，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑
"main":"dist/maucash.js",
"scripts": {
"dev":"cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build":"cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios":"^0.18.0",
"iview":"^2.14.1",
"style-loader":"^0.23.1",
"url-loader":"^1.1.2",
"vue":"^2.5.11"
},
// 指定代碼所在的倉庫地址
"repository": {
"type":"git",
"url":"git+git@git.wolaidai.com:maucash/maucash.git"
},
// 指定打包后,包中存在的文件夾
"files": [
"dist",
"src"
],
// 指定關鍵詞
"keywords": [
"vue",
"maucash",
"code",
"maucash code"
],
// 項目官網的地址
"homepage":"https://github.com/kuangshp/maucash",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core":"^6.26.0",
"babel-loader":"^7.1.2",
"babel-plugin-transform-runtime":"^6.23.0",
"babel-preset-env":"^1.6.0",
"babel-preset-stage-3":"^6.24.1",
"cross-env":"^5.0.5",
"css-loader":"^0.28.7",
"file-loader":"^1.1.4",
"node-sass":"^4.5.3",
"sass-loader":"^6.0.6",
"vue-loader":"^13.0.5",
"vue-template-compiler":"^2.4.4",
"webpack":"^3.6.0",
"webpack-dev-server":"^2.9.1"
}
}
發(fā)布到npm
到這塊后面的網上有很多更細致的教程裙戏，我就不在這里贅述了乘凸。下面給出兩個文章的鏈接，供參考累榜。
1营勤、到npm上注冊一個賬號
2、登錄
npm login
3壹罚、添加用戶信息
npm adduser
4葛作、發(fā)布到遠程倉庫(npm)上
npm publish
5、刪除遠程倉庫的包
npx force-unpublish package-name '原因描述'
