一、修改項(xiàng)目結(jié)構(gòu)
-
當(dāng)前結(jié)構(gòu)
- 修改后結(jié)構(gòu)
將原來的
src目錄箱硕，修改成examples
新建packages文件夾，用來存放后續(xù)的組件
二、修改配置
項(xiàng)目啟動(dòng)默認(rèn)入口是 src/main.js勾栗，第一步已將 src 文件名改成 examples 所以需要配置入口
- 已有
vue.config.js文件
module.exports = {
pages: {
index: {
// 入口文件
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}
}
- 沒有
vue.config.js文件
在根目錄下新建此文件 配置pages
重新啟動(dòng)項(xiàng)目 查看路徑是否正確并能正常啟動(dòng)項(xiàng)目
三、開發(fā)組件
之前已經(jīng)創(chuàng)建了一個(gè)
packages目錄盏筐，用來存放組件
該目錄下存放每個(gè)組件單獨(dú)的開發(fā)目錄围俘，和一個(gè) index.js 整合所有組件，并對(duì)外導(dǎo)出
每個(gè)組件都應(yīng)該歸類于單獨(dú)的目錄下琢融，包含其組件源碼目錄 src界牡，和 index.js 便于外部引用
以test組件為例，完整的packages如下
-
packages/test/src.main.vue是組件的代碼 注意點(diǎn): 一定要聲明name漾抬，name就是組件的標(biāo)簽 -
packages/test/index.js用于導(dǎo)出單個(gè)組件宿亡，如果要做按需引入，也需要在這里配置
// 導(dǎo)入組件纳令，組件必須聲明 name
import Test from './src/main.vue'
// 為組件添加 install 方法挽荠，用于按需引入
Test.install = function (Vue) {
Vue.component(Test.name, Test)
}
// 默認(rèn)導(dǎo)出組件
export default Test
-
packages/index.js整合并導(dǎo)出組件克胳，實(shí)現(xiàn)組件全局注冊(cè)
// 導(dǎo)入單個(gè)組件
import Test from './test/index.js'
// 以數(shù)組的結(jié)構(gòu)保存組件，便于遍歷
const components = [
Test
]
// 定義 install 方法圈匆，接收 Vue 作為參數(shù)漠另。如果使用 use 注冊(cè)插件，則所有的組件都將被注冊(cè)
const install = function (Vue) {
// 判斷是否安裝
if (install.installed) return
install.installed = true
// 遍歷并注冊(cè)全局組件
components.map(component => Vue.component(component.name, component))
}
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 導(dǎo)出的對(duì)象必須具有 install臭脓，才能被 Vue.use() 方法安裝
install,
// 組件列表
...components
}
四酗钞、測(cè)試組件是否封裝成功
在examples/main.js中引入組件
// 這里的 TagTest 就是組件內(nèi)定義的name
import TagTest from 'pack/index.js'
Vue.use(TagTest)
運(yùn)行項(xiàng)目測(cè)試組件是否有bug
五、打包組件
在 package.json 里的 scripts 添加一個(gè) lib 命令
"build:lib": "vue-cli-service build --target lib --name 生成的庫(kù)名 --dest lib packages/index.js"
運(yùn)行 npm run build:lib来累，編譯組件砚作，成功后會(huì)在根目錄生成一個(gè)lib文件
六、發(fā)布
配置package.json文件中發(fā)布到npm的字段
{
"name": "xxx", // 包名嘹锁，該名字是唯一的葫录。可在 npm 官網(wǎng)搜索名字领猾，如果存在則需換個(gè)名字米同。
"version": "0.1.0", // 版本號(hào)，每次發(fā)布至 npm 需要修改版本號(hào)摔竿，不能和歷史版本號(hào)相同面粮。
"description": "", // 描述
"main": "lib/xxx.umd.min.js", // 入口文件，該字段需指向我們最終編譯后的包文件继低。
"keyword": "", // 關(guān)鍵字熬苍，以空格分離希望用戶最終搜索的詞。
"private": false // 是否私有袁翁，需要修改為 false 才能發(fā)布到 npm
"author": "lh" // 作者
"license": "MIT" // 開源協(xié)議
在根目錄下新建.npmignore文件柴底，設(shè)置忽略發(fā)布文件
.DS_Store
node_modules/
examples/
packages/
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*
七、發(fā)布npm
- 切換鏡像
npm config set registry http://registry.npmjs.org
- 登陸npm
npm login
- 上傳發(fā)布
npm publish
