1、新建一個空項目并運行
vue create test(項目名)
2、封裝組件---在src目錄下新建文件夾 package----用來存放要上傳的組件
-
待封裝的組件放到package目錄下，可多個
image.png - 注意：(組件寫好后最好先本項目里引用一下，看組件是否顯示成功)
- 在package目錄下新建index.ts 利用Vue提供的公開方法install 配置注冊組件，代碼如下：
// 引用組件
import tqyButton from '@/package/tqy-button/index.vue'
import tqyInput from '@/package/tqy-input/index.vue'
//組件都寫在這個數(shù)組中方便管理
const componentList = [tqyButton, tqyInput]
// 批量注冊
const install = (Vue: any) => {
componentList.forEach(com => {
Vue.component(com.name, com)
})
}
// 暴露出去
export default install
3、組件打包
在test項目的配置文件package.json中添加一條腳本 "package": "vue-cli-service build --target lib ./src/package/index.ts --name tqy-ui --dest tqy-ui"
- --target lib 關(guān)鍵字 指定打包的目錄
- --name 打包后的文件名字
-
--dest 打包后的文件夾名稱
image.png
執(zhí)行打包命令: npm run package
-
打包后 項目中生成一個 tqy-ui的文件（里面是打包后的js、css文件）
image.png
4、發(fā)布到npm
在tqy-ui文件夾下初始化一個package.json文件， 進入tqy-ui目錄下，執(zhí)行命令：npm init -y
-
執(zhí)行完后后 tqy-ui目錄下多出一個package.json文件
image.png -
package.json 配置組件的一些基本信息 可按照官方規(guī)范來配置
image.png
推送到npm倉庫
- 注冊npm賬號（官網(wǎng)上注冊）
- 設(shè)置npm源（大部分人為了下載速度快，用的淘寶鏡像源，這里需要還原成npm倉庫地址，否則可能有問題）
npm config set registry=https://registry.npmjs.org
- 添加npm用戶，進入tqy-ui目錄，執(zhí)行命令：npm adduser 輸入賬號、密碼等 (之前設(shè)置過得，可不用再次設(shè)置)
npm adduser
- 發(fā)布npm 執(zhí)行命令
npm publish
- 注意：發(fā)布失敗可能是名字重復(fù)，名字重復(fù)可在 tqy-ui/package.json里修改name
5、引用并使用
- 如果引用失敗 又確實安裝上了 ，在test/scr/shims-vue.d.ts中添加declare module 'tqy-ui';
declare module 'tqy-ui';
