vue.config.js相關(guān)配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pages: { // 入口文件的相關(guān)配置
index: {
entry: 'examples/main.js', // 把src改為examples這里入口文件也要跟著改
template: 'public/index.html',
filename: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages/') // 在根目錄下加了新的文件webpack不會去打包所以要增加進去
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的選項...
return options
})
}
})
packages目錄下文件
packages/index.js
// 導入組件
import demoComponent from './demo-component/index.js'
export default demoComponent
packages\demo-component
index.js
import demoComponent from './src/demo-component'
// 為組件提供 install 安裝方法，供按需引入
demoComponent.install = function (Vue) {
Vue.component(demoComponent.name, demoComponent)
}
// 默認導出組件
export default demoComponent
src/demo-component.vue
<template>
<div>
這是demo-component.vue{{ msg }}
</div>
</template>
<script>
export default {
name: 'demoComponent',
props: {
msg: {
type: String,
required: true
}
}
}
</script>
測試
examples\main.js
import demo from '../packages/index'
console.log(demo)
createApp(App).use(store).use(router).use(demo).mount('#app')
局部組件就可以引用
打包上傳到npm
配置編譯
package.js 中新增一條編譯為庫的命令
在庫模式中，Vue是外置的，這意味著即使在代碼中引入了 Vue，打包后的文件也是不包含Vue的。
以下我們在 scripts 中新增一條命令 npm run lib
- –target : 構(gòu)建目標，默認為應(yīng)用模式。這里修改為 lib 啟用庫模式。
- –dest : 輸出目錄，默認 dist 。這里我們改成 lib
- [entry] : 最后一個參數(shù)為入口文件，默認為 src/App.vue 。這里我們指定編譯 packages/ 組件庫目錄。
"script": {
"lib": "vue-cli-service build --target lib --name jaydemoComponent --dest lib packages/index.js"
}
包名注意事項
把包名中的標點符號去掉并與現(xiàn)有的包進行比較，相同則不允許發(fā)布
例如：react-native已經(jīng)存在，那么諸如
reactnative
react_native
react.native
就不可以再發(fā)布了
注：包版本不一定要增量，可以是任意不曾使用過的版本號
被劃了作用域的包默認是私有的，所以要通過—access=public讓它變?yōu)楣械陌?/p>
npm publish --accesss=public
添加.npmignore 文件，設(shè)置忽略發(fā)布文件
我們發(fā)布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發(fā)布的。所以我們需要設(shè)置忽略目錄和文件。
和 .gitignore 的語法一樣，具體需要提交什么文件，看各自的實際情況。
# 忽略目錄
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
登錄到 npm
首先需要到 npm 上注冊一個賬號，注冊過程略。
如果配置了淘寶鏡像，先設(shè)置回npm鏡像：
npm config set registry=https://registry.npmjs.org/
然后在終端執(zhí)行登錄命令，輸入用戶名、密碼、郵箱即可登錄。
npm login
發(fā)布到 npm
執(zhí)行發(fā)布命令，發(fā)布組件到 npm
npm publish
執(zhí)行后顯示發(fā)布成功即可在npm官網(wǎng)上找到自己的包，如果沒有發(fā)布成功，有可能是包名稱和社區(qū)其他包重復(fù)了，改個名字即可。
被劃了作用域的包默認是私有的，所以要通過—access=public讓它變?yōu)楣械陌?/p>
