vue-cli 3.x 發(fā)布 npm 組件庫
整體流程
- 使 component 支持以插件的形式導(dǎo)出
- 配置 package.json 中包的關(guān)鍵信息通铲、打包命令
- 配置 .npmignore 文件
- 打包、發(fā)布
寫插件組件
首先 vue create 一個新項目器贩，正常配置即可颅夺。
然后再 src/components 目錄下新建一個文件夾 wellcome，它看起來像是這樣的：
wellcome
│ index.js
│
└─src
data.json
main.vue
src/: 存放組件的相關(guān)代碼
index.js: 支持將單組件作為插件導(dǎo)出
import Wellcome from './src/main';
// 按需引入的代碼蛹稍，支持單個導(dǎo)入
export default {
install(Vue, options) {
Vue.component(Wellcome.name, Wellcome);
},
};
不過當(dāng)我們編寫的插件組件越來越多的時候吧黄，每個組件都引入以下還是很煩的，所以唆姐，一個整體引入也是需要的拗慨。
在 src/components/ 目錄下新建一個 index.js 文件，內(nèi)容如下：
import Textarea from './textarea/index';
// 以數(shù)組的結(jié)構(gòu)保存組件奉芦，便于遍歷
const components = [Textarea];
// 引入全部組件
const install = function(Vue) {
if (install.installed) return;
install.installed = true;
// 遍歷并注冊全局組件
components.map(component => {
Vue.component(component.name, component);
});
};
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
...components,
};
package.json
name: 項目名稱
version: 版本
description: 項目描述
main: 入口文件
private: 是否私有
license: 許可
author: 作者
scripts: 配置 npm 腳本
scripts: 添加兩個命令赵抢，b(build)、p(publish)
b 指令中一般情況下只需要修改 --name 后面的參數(shù)即可声功，改參數(shù)決定了構(gòu)建后的輸出文件的名稱烦却。
--targetlib: 庫模式-- namedcom: 輸出文件名-- destlib: 輸出目錄
src/components/index.js: 入口文件
"name": "@docimax/components",
"version": "0.0.1",
"description": "docimax components plugin",
"main": "lib/dcom.umd.min.js",
"private": false,
"license": "MIT",
"author": "bei <liub@docimax.com.cn>",
"scripts": {
"serve": "vue-cli-service serve",
"b": "vue-cli-service build --target lib --name dcom --dest lib src/components/index.js",
"p": "npm publish --access public"
},
.npmignore
忽略一些文件
node_modules/
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*
build & publish
npm run b
npm run p
