一、需求
在開(kāi)發(fā)Vue3 + Ts項(xiàng)目時(shí)：使用自己二次封裝的基礎(chǔ)組件，沒(méi)有
Ts類(lèi)型提示，不能像Element-plus鼠標(biāo)停在標(biāo)簽或者屬性上就能提示當(dāng)前組件有哪些屬性（即props）及其屬性的類(lèi)型，如下圖是Element-plus組件的使用Vs CodeVolar的提示：
二、如何為自己封裝的組件庫(kù)創(chuàng)建對(duì)應(yīng)的類(lèi)型聲明文件
1、安裝vite-plugin-dts其地址點(diǎn)擊
此插件的作用：為打包的庫(kù)里加入聲明文件(即生成：.d.ts文件)
pnpm add vite-plugin-dts -D
或
npm i vite-plugin-dts -D
2、修改vite.config.ts文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import viteCompression from 'vite-plugin-compression' // 靜態(tài)資源壓縮
import dts from 'vite-plugin-dts'
export default defineConfig({
plugins: [
vue(),
dts(),
vueJsx(),
viteCompression({
verbose: true,
disable: false, // 不禁用壓縮
deleteOriginFile: false, // 壓縮后是否刪除原文件
threshold: 10240, // 壓縮前最小文件大小
algorithm: 'gzip', // 壓縮算法
ext: '.gz', // 文件類(lèi)型
})
],
build: {
outDir: 'lib',
// cssCodeSplit: true, // 強(qiáng)制內(nèi)聯(lián)CSS
rollupOptions: {
// 請(qǐng)確保外部化那些你的庫(kù)中不需要的依賴(lài)
external: ['vue'],
output: {
// 在 UMD 構(gòu)建模式下為這些外部化的依賴(lài)提供一個(gè)全局變量
globals: {
vue: 'Vue',
},
},
},
lib: {
// entry: resolve(__dirname, 'packages/index.ts'),
entry: './packages/index.ts',
name: 't-ui-plus',
// formats: ['es', 'cjs'],
fileName: 't-ui-plus',
},
}
})
3、tsconfig.json文件加上以下
// 指定被編譯文件所在的目錄 ** 表示任意目錄， * 表示任意文件
"include": [
"packages/**/*.ts",
"packages/**/*.d.ts",
"packages/**/*.tsx",
"packages/**/*.vue"
],
// 指定不需要被編譯的目錄
"exclude": [
"node_modules"
],
4、執(zhí)行vite build后生成lib文件夾，結(jié)構(gòu)如下：
會(huì)把packages文件夾里面的文件全部轉(zhuǎn)成
.d.ts格式
5、package.json文件加上以下：
// 配置模塊入口指向
"main": "lib/t-ui-plus.umd.cjs",
"module": "lib/t-ui-plus.umd.cjs",
"type": "module",
// 修改ts聲明文件指向構(gòu)建輸出的js聲明文件
"types": "lib/index.d.ts",
// 修改需要發(fā)布的文件清單
"files":[
"package.json",
"README.md",
"LICENSE",
"lib"
],
6、因?yàn)閂olar內(nèi)部通過(guò)GlobalComponents 接口去進(jìn)行類(lèi)型處理，因此需要在packages文件夾下新增.d.ts文件（我命名為：components.d.ts）
import TLayoutPage from './layout-page/src/index.vue'
import TLayoutPageItem from './layout-page-item/src/index.vue'
import TQueryCondition from './query-condition/src/index.vue'
import TTable from './table/src/index.vue'
import TForm from './form/src/index.vue'
import TSelect from './select/src/index.vue'
import TSelectTable from './select-table/src/index.vue'
import TDetail from './detail/src/index.vue'
import TButton from './button/src/index.vue'
import TStepWizard from './step-wizard/src/index.vue'
import TTimerBtn from './timer-btn/src/index.vue'
import TModuleForm from './module-form/src/index.vue'
import TAdaptivePage from './adaptive-page/src/index.vue'
import TDatePicker from './date-picker/src/index.vue'
declare module 'vue' {
export interface GlobalComponents {
TLayoutPage: typeof TLayoutPage
TLayoutPageItem: typeof TLayoutPageItem
TQueryCondition: typeof TQueryCondition
TTable: typeof TTable
TForm: typeof TForm
TSelect: typeof TSelect
TSelectTable: typeof TSelectTable
TDetail: typeof TDetail
TButton: typeof TButton
TStepWizard: typeof TStepWizard
TTimerBtn: typeof TTimerBtn
TModuleForm: typeof TModuleForm
TAdaptivePage: typeof TAdaptivePage
TDatePicker: typeof TDatePicker
}
}
7、npm publish 發(fā)布到npm，此時(shí)的lib結(jié)構(gòu)如下：
三、如何在Vue3 + Vite + Ts項(xiàng)目中使用組件庫(kù)并讓其支持Ts類(lèi)型提示
1、安裝@wocwin/t-ui-plus,并全局使用，鼠標(biāo)移入標(biāo)簽，如下并沒(méi)有Ts類(lèi)型提示：
2、讓其組件（@wocwin/t-ui-plus）有TS類(lèi)型提示的解決辦法：在tsconfig.json文件中加上以下此句代碼：
"compilerOptions": {
"types": [ // 用來(lái)指定需要包含的模塊，并將其包含在全局范圍內(nèi)。
...
"@wocwin/t-ui-plus/lib/components.d.ts"
],
}
3、最終效果—如下：
四、 源碼地址
gitHub組件地址
gitee碼云組件地址
五、相關(guān)文章
Vue3 + Vite + Ts開(kāi)源后臺(tái)管理系統(tǒng)模板
基于ElementUi或AntdUI再次封裝基礎(chǔ)組件文檔文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-493688.html
基于Element-plus再次封裝基礎(chǔ)組件文檔(vue3+ts)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-493688.html
到了這里，關(guān)于Vue3 + Vite + Ts自己封裝的基礎(chǔ)組件庫(kù)發(fā)布npm ，npm安裝使用（Volar ）支持TS 類(lèi)型提示功能（vite-plugin-dts 使用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
