沉淀自己的pro-table組件，并發(fā)布到npm
傳送門
約定：npm包名vue3-el-pro-table，引用vue3-el-pro-table的包名為“本項(xiàng)目”。
聲明：Vue3ProTable.vue代碼是在這個項(xiàng)目的基礎(chǔ)上進(jìn)行修改的。
作者：hans774882968以及hans774882968以及hans774882968
Quick Start
yarn add vue3-el-pro-table
src/main.ts
import 'vue3-el-pro-table/dist/vue3-el-pro-table.css';
import Vue3ProTable from 'vue3-el-pro-table';
createApp(App)
.use(Vue3ProTable)
.mount('#app');
Then use <vue3-pro-table /> directly in .vue file.
Import interface:
import { Vue3ProTableProps } from 'vue3-el-pro-table';
Component props definition:
export declare interface Vue3ProTableProps {
request: (...args: any[]) => Promise<{ data: object[], total: number }>
// 表格標(biāo)題
title?: string
// 是否隱藏標(biāo)題欄
hideTitleBar?: boolean
// 搜索表單配置，false表示不顯示搜索表單
search?: boolean | object
border?: boolean
// 表頭配置
columns?: object[]
// 行數(shù)據(jù)的Key，同elementUI的table組件的row-key
rowKey?: string
// 分頁配置，false表示不顯示分頁
pagination?: boolean | object
tree?: object
// The above attributes are all from https://github.com/huzhushan/vue3-pro-table. The following properties are added by me.
loadTableDataBeforeMount?: boolean
blockRedundantRequestOnReset?: boolean
paddingLeft?: string | number
paddingRight?: string | number
}
Plz refer to https://github.com/huzhushan/vue3-pro-table for instructions on how to use vue3-el-pro-table.
開發(fā)過程筆記
根據(jù)參考鏈接3，實(shí)際上我們只需要提供一個符合Vue插件格式的入口install.js，和一個Vue組件。但為了滿足npm包迭代過程中的預(yù)覽、測試等需求，我們?nèi)匀恍枰越M件庫的標(biāo)準(zhǔn)來開發(fā)這個npm包。因此我采用的方案是：先使用vue-cli快速創(chuàng)建一個項(xiàng)目，滿足組件的預(yù)覽、測試等需求，在此基礎(chǔ)上再新增一個構(gòu)建流程。
- 使用
vue-cli創(chuàng)建一個普通的Vue3 + TS項(xiàng)目。 - 新增組件
src/components/Vue3ProTable.vue。 - 新增Vue插件入口
src/install.js：
import HelloWorld from './components/HelloWorld.vue';
import Vue3ProTable from './components/Vue3ProTable.vue';
function install(app) {
if (install.installed) return;
install.installed = true;
app.component('test-hello-world', HelloWorld); // 順便把腳手架生成的組件也注冊為全局組件
app.component('vue3-pro-table', Vue3ProTable);
}
Vue3ProTable.install = install;
export default { install };
- 新增
build-lib命令并運(yùn)行yarn build-lib——這就是vue3-el-pro-table生成Vue插件的構(gòu)建命令：
{
"scripts": {
"build": "vue-cli-service build", // 作為對比
"build-lib": "vue-cli-service build --target lib --name vue3-el-pro-table ./src/install.js" // 參考：https://cli.vuejs.org/guide/build-targets.html#library
},
}
- 構(gòu)建成功后修改
package.json修改下入口：
{
"main": "dist/vue3-el-pro-table.umd.js",
}
在另一個項(xiàng)目（即本項(xiàng)目）預(yù)覽最新改動：
yarn add file:../vue3-el-pro-table
接下來開始踩坑了。當(dāng)引入的組件使用slot的時(shí)候會報(bào)錯：
Cannot read properties of null (reading 'isCE')
根據(jù)參考鏈接2，原因是本項(xiàng)目和vue3-el-pro-table各有一個vue，即使它們版本相同也會引起沖突。雖然參考鏈接2的提問說給webpack添加vue配置無濟(jì)于事，但我的項(xiàng)目用這個配置是可以解決問題的。
在本項(xiàng)目的vue.config.js禁用symlinks并alias vue：
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
module.exports = defineConfig({
chainWebpack(config) {
config.resolve.symlinks(false);
config.resolve.alias.set('vue', path.resolve('./node_modules/vue'));
},
devServer: {
port: 8090,
},
transpileDependencies: true,
});
add TS Support
為了防止本項(xiàng)目報(bào)TS錯誤，我們的npm包vue3-el-pro-table需要給出.d.ts文件。
- 本項(xiàng)目
package.json指定類型定義文件路徑：
{
"types": "dist/global.d.ts"
}
- 本項(xiàng)目
tsconfig.json新增配置：
{
"compilerOptions": {
"types": [
"webpack-env",
"jest",
"vue3-el-pro-table/dist/global.d.ts", // 獲取 vue3-el-pro-table 注冊的全局組件的類型提示
"element-plus/global.d.ts" // 獲取 element-plus 組件的類型提示
],
}
}
global.d.ts不應(yīng)該放在dist目錄，因此我把它放到了src/global.d.ts，并配置CopyWebpackPlugin。vue3-el-pro-table的vue.config.js：
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = defineConfig({
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src', 'global.d.ts'),
to: path.resolve(__dirname, 'dist'),
},
],
}),
],
},
transpileDependencies: true,
});
最理想的情況下dist/global.d.ts能在編譯時(shí)直接生成，但可惜我們參考的Vue3ProTable.vue不是一個TS組件，且改造為TS組件的工作量過大，因此global.d.ts是手動維護(hù)的，傳送門。
我們期望dist/global.d.ts能夠給組件提供類型提示。根據(jù)參考鏈接4，需要以下代碼：
declare const CVue3ProTable: import('vue').DefineComponent<......>;
declare const CHelloWorld: import('vue').DefineComponent<{
msg: StringConstructor;
}, unknown, unknown, object, object, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, object, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
msg: StringConstructor;
}>>, object, object>;
declare module 'vue' {
export interface GlobalComponents {
Vue3ProTable: typeof CVue3ProTable
TestHelloWorld: typeof CHelloWorld
}
}
這里的CVue3ProTable, CHelloWorld看上去很復(fù)雜，不會是手寫的吧？的確不是手寫的，可以讓vue-tsc生成。首先安裝vue-tsc并新增命令：
{
"gen-declaration": "vue-tsc -p tsconfig.declaration.json"
}
然后新增tsconfig.declaration.json：文章來源：http://www.zghlxwxcb.cn/news/detail-596396.html
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "es",
"declaration": true,
"emitDeclarationOnly": true
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/**", "**/__demos__/**", "**/*.md"]
}
最后執(zhí)行yarn gen-declaration，把組件的類型定義復(fù)制到global.d.ts即可。文章來源地址http://www.zghlxwxcb.cn/news/detail-596396.html
參考資料
- 聲明式 UI 介紹：https://flutter.cn/docs/get-started/flutter-for/declarative
- Cannot read properties of null (reading ‘isCE’)：https://stackoverflow.com/questions/71063992/when-importing-self-made-vue-3-library-into-vue-3-project-uncaught-typeerror
- 在 NPM 上創(chuàng)建并發(fā)布您的第一個 Vue.JS 插件：https://5balloons.info/create-publish-you-first-vue-plugin-on-npm-the-right-way/
- 全局組件類型聲明的最佳實(shí)踐 (Vue3+TS+Volar)：https://juejin.cn/post/7066730414626308103
到了這里，關(guān)于沉淀自己的pro-table組件，并發(fā)布到npm（Vue3、element-plus）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
