1、首先新建一個組件，下面以封裝的基礎input爲例子：
BaseInput.vue組件
代碼如下
<el-input
v-model="value"
:size="size"
:type="type"
:rows="rows"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
:maxlength="length" >
</el-input>
<script>
export default {
name: 'BaseInput' //每個組件需要寫明“name”屬性
props:{
size: String, // 輸入框大小設置
rows: null,
type: String,
placeholder: String,
disabled: Boolean,
readonly: Boolean,
length: [Number, String],
}
}
</script>
注意：組件內部一定要寫明“name”屬性
2、在組件同級目錄下新建一個index.js文件
目錄結構如下：
index.js代碼如下：
組件的註冊，目的是爲組件提供 install 安裝方法，供按需引入。
// 導入組件，組件必須聲明 name
import BaseInput from './baseInput.vue'
// 爲組件提供 install 安裝方法，供按需引入
BaseInput.install = function (Vue) {
Vue.component(BaseInput.name, BaseInput)
}
// 默認導出組件
export default BaseInput
3、導出組件
整合所有的組件，對外導出，即一個完整的組件庫
在components文件在新建一個index.js文件：
目錄結構如下：
index.js代碼如下：
// 導入下拉按鈕組件
import BaseInput from './baseInput/BaseInput.vue'
// 存儲組件列表
const components = [
BaseInput
]
// 定義 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,
// 以下是具體的組件列表
BaseInput
}
4、配置項目
vue.config.js 配置文件，如果這個文件存在則他會被自動加載，所有的對項目和webpack的配置，都在這個文件中。
目錄結構：
vue.config.js代碼：
module.exports = {
pages: {
index: {
entry: 'src/components/index.js', // 入口文件
template: 'public/index.html', // 模板來源
filename: 'index.html' //輸出文件
}
},
css: { extract: false },
}
5、編譯命令
根目錄下 package.json 中新增一條編譯爲庫的命令 --target: 構建目標，默認爲應用模式。這裏修改爲 lib 啓用庫模式。 --dest : 輸出目錄，默認 dist。這裏我們改成 lib [entry]: 最後一個參數爲入口文件，默認爲 src/admin/manage/App.vue。這裏我們指定編譯 src/components/index.js
目錄結構：
package.json代碼如下：新增一條
"scripts": {
"lib": "vue-cli-service build --target lib --name baseInput --dest lib src/components/index.js",
}
6、執行編譯庫命令
npm run lib
7、配置發佈包的字段
打包完之後，修改package.json文件
根目錄下 package.json中配置
description: 描述
keyword：關鍵字，以空格分離希望用戶最終搜索的詞
author：作者
license： 開源協議
代碼如下：
{
"name": "BaseInput",//上傳到npm私服中的包名，也是發佈要引用import的名字
"version": "0.1.0",//版本號，每次npm publish發佈時，需要修改不同的版本號
"private": false,//是否私有，設置爲false纔可以發佈到npm
"main": "lib/BaseInput.umd.min.js",//入口文件，該字段需要指向最終編譯後的包文件
"scripts": {
"lib": "vue-cli-service build --target lib --name BaseInput--dest lib src/components/index.js",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"beta": "vue-cli-service build --mode beta",
"lint": "vue-cli-service lint",
"analyze": "ANALYZE=true vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
}
}
8、設置忽略發佈文件
減小包的體積。
發佈到 npm 中，只有編譯後的 lib 目錄、package.json、README.md纔是需要被髮布的。
需要設置忽略目錄和文件。
和 .gitignore 的語法一樣，具體需要提交什麼文件，看各自的實際情況。
9、在本地測試並使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rollup.js + vue</title>
</head>
<body>
<div id="app">
<base-input
placeholder="請輸入"
type="text"
v-model="valueOne">
</base-input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./lib/BaseInput.umd.js"></script>
<script>
Vue.use(hero)
Vue.use(BaseInput)
var app = new Vue({
el: '#app',
data(){
return {
valueOne:'你好'
}
}
})
</script>
</body>
</html>
10、發佈包
把打包好的lib文件發佈到自己的私服或者git上
11、下載並使用
npm install BaseInput
在 main.js 引入並註冊
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;//使用element組件需要引入對應的樣式文件
import BaseInput from ‘BaseInput’
Vue.use(ElementUI)
Vue.use(BaseInput)
