創(chuàng)建項(xiàng)目
在指定目錄中使用命令創(chuàng)建一個默認(rèn)的項(xiàng)目婶博，或者根據(jù)自己需要自己選擇践瓷。
$ vue create .
調(diào)整目錄
我們需要一個目錄存放組件分衫，一個目錄存放示例据德，按照以下方式對目錄進(jìn)行改造减拭。
.
...
|-- examples // 原 src 目錄蔽豺，改成 examples 用作示例展示
|-- packages // 新增 packages 用于編寫存放組件
...
.
配置項(xiàng)目以支持新的目錄結(jié)構(gòu)
我們通過上一步的目錄改造后，會遇到兩個問題拧粪。
1修陡、src 目錄更名為 examples ，導(dǎo)致項(xiàng)目無法運(yùn)行
2可霎、新增 packages 目錄魄鸦，該目錄未加入 webpack 編譯
注：cli3 提供一個可選的 vue.config.js 配置文件。如果這個文件存在則他會被自動加載癣朗，所有的對項(xiàng)目和webpack的配置拾因，都在這個文件中。
- 重新配置入口旷余，修改配置中的 pages 選項(xiàng)
新版 Vue CLI 支持使用 vue.config.js 中的 pages 選項(xiàng)構(gòu)建一個多頁面的應(yīng)用绢记。
這里使用 pages 修改入口到 examples
module.exports = {
// 修改 src 為 examples
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html"
}
}
}
- 支持對 packages 目錄的處理，修改配置中的 chainWebpack 選項(xiàng)
packages 是我們新增的一個目錄正卧，默認(rèn)是不被 webpack 處理的蠢熄，所以需要添加配置對該目錄的支持。
chainWebpack 是一個函數(shù)炉旷，會接收一個基于 webpack-chain 的 ChainableConfig 實(shí)例签孔。允許對內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。
module.exports = {
// 修改 src 為 examples
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html"
}
},
// 擴(kuò)展 webpack 配置窘行，使 packages 加入編譯
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages/')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的選項(xiàng)...
return options
})
}
};
編寫組件
如圖饥追，demo-component就是一個組件。每個組件都要新建一個文件夾罐盔，然后添加index.js以及src文件夾但绕。
// demo-component.vue
<template>
<div>
這是demo-component.vue
</div>
</template>
<script>
export default {
name: 'demoComponent'
}
</script>
// src/index.js
// 導(dǎo)入組件，組件必須聲明 name
import demoComponent from './src/demo-component'
// 為組件提供 install 安裝方法翘骂，供按需引入
demoComponent.install = function (Vue) {
Vue.component(demoComponent.name, demoComponent)
}
// 默認(rèn)導(dǎo)出組件
export default demoComponent
將packages中的所有組件導(dǎo)出
在packages文件夾下新建index.js
// 導(dǎo)入顏色選擇器組件
import demoComponent from "./demo-component/index.js";
// 存儲組件列表
const components = [demoComponent];
// 定義 install 方法壁熄，接收 Vue 作為參數(shù)。如果使用 use 注冊插件碳竟，則所有的組件都將被注冊
const install = function(Vue) {
// 判斷是否安裝
if (install.installed) return;
// 遍歷注冊全局組件
components.forEach(component => {
Vue.component(component.name, component)
});
};
// 判斷是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
// 導(dǎo)出的對象必須具有 install草丧，才能被 Vue.use() 方法安裝
install,
// 以下是具體的組件列表
demoComponent
};
在項(xiàng)目中引入組件
// main.js
// 導(dǎo)入組件庫
import demo from '../packages/index';
// 注冊組件庫
Vue.use(demo);
使用 Vue.use() 全局注冊后，即可在任意頁面直接使用了莹桅，而不需另外引入昌执。當(dāng)然也可以按需引入烛亦。
// Home.vue
<demo-component></demo-component>
npm run serve執(zhí)行后即可看到效果。
發(fā)布到 npm懂拾，方便直接在項(xiàng)目中引用
1煤禽、 package.js 中新增一條編譯為庫的命令
在庫模式中，Vue是外置的岖赋，這意味著即使在代碼中引入了 Vue檬果，打包后的文件也是不包含Vue的。
Vue Cli3 構(gòu)建目標(biāo)：庫
以下我們在 scripts 中新增一條命令 npm run lib
- --target : 構(gòu)建目標(biāo)唐断，默認(rèn)為應(yīng)用模式选脊。這里修改為 lib 啟用庫模式。
- --dest : 輸出目錄脸甘，默認(rèn) dist 恳啥。這里我們改成 lib
- [entry] : 最后一個參數(shù)為入口文件，默認(rèn)為 src/App.vue 丹诀。這里我們指定編譯 packages/ 組件庫目錄钝的。
"script": {
// ...
"lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}
執(zhí)行編譯庫命令
$ npm run lib
2、配置 package.json 文件中發(fā)布到 npm 的字段
name
version
description
main
keyword
author
private
license
以下為參考設(shè)置
{
"name": "vcolorpicker",
"version": "0.1.5",
"description": "基于 Vue 的顏色選擇器",
"main": "lib/vcolorpicker.umd.min.js",
"keyword": "vcolorpicker colorpicker color-picker",
"private": false
}
3铆遭、添加.npmignore 文件硝桩，設(shè)置忽略發(fā)布文件
我們發(fā)布到 npm 中，只有編譯后的 lib 目錄疚脐、package.json亿柑、README.md才是需要被發(fā)布的。所以我們需要設(shè)置忽略目錄和文件棍弄。
和 .gitignore 的語法一樣，具體需要提交什么文件疟游，看各自的實(shí)際情況呼畸。
# 忽略目錄
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
4、登錄到 npm
首先需要到 npm 上注冊一個賬號颁虐，注冊過程略蛮原。
如果配置了淘寶鏡像，先設(shè)置回npm鏡像：
$ npm config set registry http://registry.npmjs.org
然后在終端執(zhí)行登錄命令另绩，輸入用戶名儒陨、密碼、郵箱即可登錄笋籽。
$ npm login
5蹦漠、發(fā)布到 npm
執(zhí)行發(fā)布命令，發(fā)布組件到 npm
$ npm publish
執(zhí)行后顯示發(fā)布成功即可在npm官網(wǎng)上找到自己的包车海，如果沒有發(fā)布成功笛园，有可能是包名稱和社區(qū)其他包重復(fù)了，改個名字即可。
