歡迎點擊領取 -《前端開發(fā)面試題進階秘籍》：前端登頂之巔-最全面的前端知識點梳理總結
*分享一個使用比較久的??
在國內(nèi)的項目研發(fā)過程中，使用vue框架的項目占比很大，同樣延伸出了很多非常優(yōu)秀的UI組件庫，比如element-plus、ant-design等；優(yōu)勢：資源較少，快速開發(fā)，豐富的API，閱讀性、性能優(yōu)化更好等等。
開發(fā)流程準備
- 創(chuàng)建基礎的vite腳手架
npm i -g pnpm // 先安裝pnpm第三方依賴包管理工具(npm/cnpm/yarn/pnpm之間的區(qū)別自行百度)
pnpm create vite
如下方圖片: 
-
將vite-project項目-目錄結構進行基礎修改：
文章來源：http://www.zghlxwxcb.cn/news/detail-433935.html -
在packages文件下導出并注冊所涉及的組件文章來源地址http://www.zghlxwxcb.cn/news/detail-433935.html
import vCharts from './v-charts/v-charts.vue'
import TableList from './TableList/TableList.vue'
import SearchForm from './SearchForm/SearchForm.vue'
import CustomSelect from './custom-select/index.vue'
export * from './v-charts/useCharts';
const components = [SearchForm, TableList, vCharts, CustomSelect]
const install = function (Vue: any) {
components.forEach((app) => {
Vue.component(app.name, app);
});
};
export default install;
- 修改vite.config.ts
import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import libCss from 'vite-plugin-libcss';
export default defineConfig({
plugins: [vue(), libCss()],
resolve: {
alias: {
'@': resolve(__dirname, './src')
},
},
build: {
outDir: "dist",
target: "es2015",
lib: {
name: "TrapUI", // 名稱
entry: resolve(__dirname, "src/packages/index.ts"), // 打包文件入口
fileName: (format) => `trap-ui.${format}.js`, // 打包文件的名字
},
chunkSizeWarningLimit: 2000,
rollupOptions: {
external: ["vue", "axios", "echarts", '@popperjs/core', 'vue-router', "element-plus"],
output: {
exports: 'named',
globals: {
vue: "Vue",
axios: 'axios',
echarts: 'echarts',
'vue-router': 'vueRouter',
"element-plus": "ElementPlus",
'@popperjs/core': '@popperjs/core',
},
},
},
},
});
- 修改package.json文件
- 執(zhí)行構建npm run build命令將打包產(chǎn)物發(fā)布至npm上
- 將本地鏡像切換至npm或者公司私服上
- 執(zhí)行npm login
- 執(zhí)行npm publish 每次發(fā)布版本號不同
在npm上發(fā)布后，淘寶鏡像有延遲同步當前版本，需要打開淘寶鏡像進行版本update就可以正常使用了 https://npmmirror.com/
到了這里，關于vue3.x + vite4.3構建屬于自己的組件庫并發(fā)布npm包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3項目(組件、圖標等按需引入)[保姆級]](https://imgs.yssmx.com/Uploads/2024/01/418790-1.jpeg)
