該系列已更新文章：
分享一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率
開箱即用 yyg-cli 腳手架：快速創建 vue3 組件庫和vue3 全家桶專案
Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo
Vue3 企業級優雅實戰 - 組件庫框架 - 2 初始化 workspace-root
Vue3 企業級優雅實戰 - 組件庫框架 - 3 搭建組件庫開發環境
Vue3 企業級優雅實戰 - 組件庫框架 - 4 組件庫的 CSS 架構
Vue3 企業級優雅實戰 - 組件庫框架 - 5 組件庫通用工具包
前面用了大量篇幅介紹組件庫的開發環境搭建，包括：創建組件、創建組件庫入口、組件庫樣式架構、組件庫公共包，做了一大堆作業，還不能預覽示例組件 foo，本文便搭建 example 開發環境和打包構建，并在 example 中使用組件庫，
1 搭建 example 開發環境
1.1 創建 example 專案
example 本質上就是一個 vite3 + vue3 的專案，可以通過 vite 來創建，也可以通過優雅哥撰寫的 yyg-cli 來創建一個全家桶專案，甚至可以手動搭建，后面程式員優雅哥會用 example 來實作一個完整的企業級中后臺管理專案，用它來驅動組件庫的組件開發，
簡單一些，這里就使用 vite 來創建 example 專案，從命令列中進入 example 目錄，運行：
pnpm create vite
- 輸入該命令后，稍等一會兒會提示輸入 project name，由于咱們已經創建 example 目錄，這里輸入一個點（.）即可；
- framework 選擇 Vue；
- variant 選擇 TypeScript，
1.2 修改 package.json
生成專案后，先不要著急安裝依賴，因為有些依賴已經在 workspace-root 中安裝了，在這個子模塊中便無需重復安裝，
修改 package.json 的 name、dependencies、devDependencies，修改后內容如下：
{
"name": "@yyg-demo-ui/example",
...
"dependencies": {
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.2.0",
"typescript": "^4.6.4"
}
}
1.3 修改 vite 組態檔
自動生成的 vite.config.ts 檔案只配置了 vue 插件，咱需要對其進行其他配置，如 TSX 插件、ESLint 插件、路徑別名等：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import eslint from 'vite-plugin-eslint'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
vue(),
vueJsx(),
eslint()
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
server: {
port: 3000,
cors: true,
proxy: {}
},
build: {
outDir: path.resolve(__dirname, '../dist')
}
})
1.4 多環境支持
這一步非必須，只是為了后面的專案開發做準備的，多環境支持在之前的文章中已經詳細講過，各位可以翻閱之前的文章，這里僅快速操作一遍，
- 在 example 目錄下創建 env 目錄，并在該目錄中分別創建四個檔案：
example/env/.env：
VITE_BASE_API=/api
VITE_APP_NAME='demo app'
example/env/.env.dev：
VITE_BASE_API=/dev-api
NODE_ENV=production
example/env/.env.uat：
VITE_BASE_API=/uat-api
example/env/.env.prod：
VITE_BASE_API=/prod-api
- 在 vite.config.ts 中指定環境檔案目錄：
export default defineConfig({
...
envDir: path.resolve(__dirname, 'env'),
...
})
- 在 src 中創建 env.d.ts 檔案，以便于型別提示：
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_BASE_API: string;
readonly VITE_APP_NAME: string;
}
// eslint-disable-next-line no-unused-vars
interface ImportMeta {
readonly env: ImportMetaEnv
}
- 修改 package.json 的 scripts：
{
...
"scripts": {
"dev:dev": "vite --mode dev",
"dev:uat": "vite --mode uat",
"dev:prod": "vite --mode prod",
"build:dev": "vue-tsc --noEmit && vite build --mode dev",
"build:uat": "vue-tsc --noEmit && vite build --mode uat",
"build:prod": "vue-tsc --noEmit && vite build --mode prod",
"preview": "vite preview"
},
...
}
- 在 main.ts 中測驗輸入環境變數：
const env = import.meta.env
console.log(env)
1.5 測驗啟動服務
執行 pnpm run dev:dev，測驗服務是否能正常啟動，然后在瀏覽器中訪問 localhost:3000，測驗界面是否正常，環境變數是否正常輸出，
2 測驗 foo 組件
example 能正常運行后，說明 example 已經初始化成功，接下來便需要測驗前面開發的 foo 組件了，
2.1 安裝依賴
由于自定義組件庫依賴于 element-plus，首先需要在 example 中安裝 element-plus：
pnpm install element-plus
接著安裝咱們的本地組件庫 @yyg-demo-ui/yyg-demo-ui：
pnpm install @yyg-demo-ui/yyg-demo-ui
此時 example 的 package.json dependencies 如下：
"dependencies": {
"@yyg-demo-ui/yyg-demo-ui": "workspace:^1.0.0",
"element-plus": "^2.2.21"
},
2.2 引入組件庫
在 main.ts 中分別引入 element-plus 和 自定義組件庫：
...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YygDemoUi from '@yyg-demo-ui/yyg-demo-ui'
...
const app = createApp(App)
app.use(ElementPlus)
app.use(YygDemoUi)
app.mount('#app')
2.3 使用組件
專案創建時自動在 src/style.css 生成了很多樣式，可以將里面的內容都洗掉，留下一個空的 style.css 檔案，
最后只需在 App.vue 中測驗 foo 組件即可，修改 App.vue 如下：
<template>
<div >
<h1>組件庫測驗站點 yyg-demo-ui</h1>
<p>測驗站點主要用于開發程序中測驗組件，即在開發程序中由業務驅動組件開發，</p>
<yyg-foo :msg="msg"></yyg-foo>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('hello world')
</script>
<style scoped lang="scss">
.site {
padding: 20px;
}
</style>
2.4 運行查看效果
再次運行 pnpm run dev:dev，查看效果：
foo 組件的樣式、功能、以及 testLog 函式都正常運行，則 example 和 組件庫的開發環境便已完成，
3 example 打包構建
在前面的 scripts 中添加了 build:dev、build:uat、build:prod命令，分別對應dev、uat、prod 三個環境，咱們就以 dev 環境為例說明 example的打包構建，
從命令列中進入 example 目錄，依次進行打包構建、預覽：
- 執行 pnpm run build:dev 進行打包，打包構建成功后，會在整個專案的根目錄下生成 dist 目錄（該目錄在 vite.config.ts 中 build.outDir 配置）；
- 執行 pnpm run preview 對打包后的檔案進行預覽，訪問控制臺中輸出的埠，運行效果與上面的效果一致，
到這里，example 的開發和構建便已經完成，咱們可以在 example 中使用組件庫的組件，下文將介紹組件庫檔案的開發和構建，
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關注、收藏，程式員優雅哥會持續與大家分享更多干貨
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535230.html
標籤：其他
上一篇：vue-router