步驟
- 用vite創(chuàng)建一個最簡單的vue3.X項(xiàng)目
- 組件開發(fā)并導(dǎo)出
- 包的本地調(diào)試
- 上傳github并發(fā)布npm
- 新插件下載走哺，驗(yàn)證組件是否能正常使用
vue3.X組件開發(fā)
結(jié)構(gòu)目錄
image.png
- package/compenents: 組件代碼
- package/utils: 接口類型定義伞访、公共方法等
- src/App.vue: 組件演示頁面
- index.ts：組件導(dǎo)出文件
組件開發(fā)啥的就自己發(fā)揮了载弄，簡單說下組件的安裝和導(dǎo)出
組件注冊
在每個component里創(chuàng)建一個index.ts文件做組件安裝雪隧、導(dǎo)出的操作遇革。
// package/compenents/XX/index.ts
import vue3Barrage from './vue3-barrage.vue';
import type { App } from 'vue';
vue3Barrage.install = (app: App): void => {
app.component(vue3Barrage.name, vue3Barrage);
};
export default vue3Barrage;
export const Vue3Barrage = vue3Barrage;
這樣在main.js了就可以使用了
import { createApp } from 'vue';
import App from './App.vue';
import { Vue3Barrage } from '../packages/components/vue3-barrage';
// or import vue3Barrage from '../packages/components/vue3-barrage';
const app = createApp(App);
app.use(Vue3Barrage);
// or app.use(vue3Barrage);
app.mount('#app');
難點(diǎn)：在vue3.X里component.name怎么設(shè)置？
// 再寫一個script阱高，像下面這樣横殴，設(shè)置一個name
<script lang="ts">
export default { name: "vue3Barrage" };
</script>
<script setup lang="ts">
導(dǎo)出
這里說的導(dǎo)出是npm安裝后的導(dǎo)出使用
在根目錄創(chuàng)建component.ts和index.ts文件
// component.ts 用于匯總所有組件被因，只不過我就寫了一個哈哈哈
import type { Plugin } from 'vue';
import { Vue3Barrage } from './packages/components/vue3-barrage';
export default [Vue3Barrage] as Plugin[];
// index.ts 注冊組件并導(dǎo)出
import type { App, Plugin } from 'vue';
import Components from './component';
const INSTALLED_KEY = Symbol('INSTALLED_KEY');
export const makeInstaller = (components: Plugin[] = []) => {
const install = (app: App, options) => {
if (app[INSTALLED_KEY]) return;
app[INSTALLED_KEY] = true;
components.forEach(c => app.use(c));
};
return {
install,
};
};
export default makeInstaller([...Components]);
難點(diǎn)：不通過 index.ts注冊并導(dǎo)出npm下載使用的時候會報錯，所以我參看了element-plus的做了簡單的導(dǎo)出衫仑，不報錯了梨与，能用
導(dǎo)出錯誤時使用報錯
package.json修改和md文檔編寫
package.json的個別字段修改也是很有必要的，我認(rèn)為主要的有以下幾個：
- name：插件名稱文狱，注意不要和已有的npm包重名了
- private：防止意外發(fā)布私有存儲庫的屬性粥鞋，false時可以發(fā)布到npm
- version：版本號
- keywords：搜索時的關(guān)鍵詞
- license：開源協(xié)議
- repository：代碼存儲庫地址
- bugs：bug上報地址
然后就是md的使用文檔了，寫了別人用起來上手更快咯
包本地調(diào)試
通過本地調(diào)試后上傳會避免很多麻煩瞄崇，所以自測很重要呻粹，要測試的細(xì)致。不過我們這發(fā)布用戶只會是自己８芨ぁ尚猿！但本地調(diào)試也是很有必要的
- 在本地使用項(xiàng)目的package.json里添加包路徑
// package.json
"dependencies": {
"vue3-barrage": "F:/vue3-barrage"
}
- 新包鏈接測試項(xiàng)目
npm link 包名（package.json中的name）
link截圖
這樣就能實(shí)現(xiàn)本地調(diào)試的目的了窝稿，還是實(shí)時更新的楣富。就兩步很方便！伴榔！
npm 發(fā)布
測試的差不多了纹蝴，就可以發(fā)布了
- 將代碼提交到github，因?yàn)閚pm需要的踪少，在Repository和homepage里點(diǎn)擊會自動跳轉(zhuǎn)到代碼存儲庫
- 首次發(fā)布就去npmjs.com注冊個賬號塘安，然后在本地cmd登錄，publish發(fā)布援奢，具體的可以去百度下兼犯，csdn上很多這樣的貼子
上傳成功會會有如下提示：
publish成功
在npmjs.com也能搜到這個插件！集漾！
下載使用
一般有本地測試的包都不會有太大問題
這樣自己的組件庫就發(fā)布成功了
注意：剛發(fā)布的包去下載會報錯切黔，不存在這個版本的插件，等一會再去下載就行了
未存在該版本的包
總結(jié)
這樣一個自己的npm包就發(fā)布了
全程沒有多少難點(diǎn)具篇，都可以百度找到解決辦法
