該系列已更新文章： 分享一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率 開箱即用 yyg-cli 腳手架：快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...
該系列已更新文章：
分享一個實用的 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 class="site">
<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 中使用組件庫的組件。下文將介紹組件庫文檔的開發和構建。
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，程式員優雅哥會持續與大家分享更多乾貨
