前言:之前在網上找的好多都是基於vue-cli 2.x的,而使用vue-cli 3的文章比較少, Vue CLI 3 中文文檔,所以我在自己嘗試的時候把幾篇文章結合了一下,調出來了我想要的模式,也就是Vue CLI 3 + element-ui + 多個二次封裝的組件。最終想要的是 element-ui 這種感覺的,很多組件可以在不同項目中復用。
安裝依賴
首先用Vue CLI 3來初始化項目
yarn global add @vue/cli
vue create qiyun-el-ui
vue ui
安裝element-ui
這里使用官方提供的的插件安裝:
http://element.eleme.io/#/zh-...
https://github.com/ElementUI/...
在插件列表搜索element
在這里我選的手動導入,圖中是全部導入
這樣在項目中,就會新建一個plugins文件夾,里面有個element.js 文件,如果想手動引入,就在這里添加要依賴的組件,這里是為了調試組件:
import Vue from 'vue'
import {
Button,
Dialog
} from 'element-ui'
Vue.use(Button)
Vue.use(Dialog)
由於我們是基於element-ui
的部分組件做的二次封裝,所以最好還是按需引入所依賴的組件比較好。
編寫組件
在 src
的同級下面新建 packages
目錄,在這里添加自己封裝的要發布的組件。
例如,新建 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
,里面注冊單獨的該組件,方便使用時可以單獨引用:
import qeModal from './src/qe-modal'
qeModal.install = function(Vue) {
Vue.component(qeModal.name, qeModal)
}
export default qeModal
這樣一個組件就添加完成了,然后需要在 packages
的根目錄下添加一個總的 index.js
,這里是全局注冊的地方,使用時可以全局引入,其實就跟 element-ui
的兩種方式一樣:
import qeModal from './qe-modal'
const components = [
qeModal
]
const install = function(Vue) {
components.forEach(component => {
Vue.component(component.name, component);
});
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
qeModal
}
后面再添加組件,在這里也要再注冊一下,而element-ui
源碼中是動態引入的,我們的項目組件還沒那么多,可以先一個個手動引入,如果后面數量多了,不好維護,可以參考 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包發布的相關信息,比如作者、版本等:
其中最重要的是:
"main": "lib/qiyun-el-ui.common.js",
這里的路徑要和上面構建出來的目錄和文件名對應上。
里面的配置項,在網上找了個例子:
{
"name": "maucash",
"description": "maucash中常用組件抽取",
"version": "1.0.2",
"author": "kuangshp <kuangshp@126.com>",
// 開源協議
"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"
}
}
發布到npm
到這塊后面的網上有很多更細致的教程,我就不在這里贅述了。下面給出兩個文章的鏈接,供參考。
1、到npm上注冊一個賬號
2、登錄npm login
3、添加用戶信息npm adduser
4、發布到遠程倉庫(npm)上npm publish
5、刪除遠程倉庫的包npx force-unpublish package-name '原因描述'
參考:
https://juejin.im/post/5bc441...
Vue cli3 庫模式搭建組件庫並發布到 npm的流程_vue.js_腳本之家