前面用了大量篇幅介紹組件庫的開發(fā)環(huán)境搭建，包括：創(chuàng)建組件、創(chuàng)建組件庫入口、組件庫樣式架構(gòu)、組件庫公共包，做了一大堆工作，還不能預(yù)覽示例組件 foo，本文便搭建 example 開發(fā)環(huán)境和打包構(gòu)建，并在 example 中使用組件庫。

1 搭建 example 開發(fā)環(huán)境

1.1 創(chuàng)建 example 項目

example 本質(zhì)上就是一個 vite3 + vue3 的項目，可以通過 vite 來創(chuàng)建，也可以通過優(yōu)雅哥編寫的 yyg-cli 來創(chuàng)建一個全家桶項目，甚至可以手動搭建。后面程序員優(yōu)雅哥會用 example 來實現(xiàn)一個完整的企業(yè)級中后臺管理項目，用它來驅(qū)動組件庫的組件開發(fā)。

簡單一些，這里就使用 vite 來創(chuàng)建 example 項目。從命令行中進入 example 目錄，運行：

pnpm create vite

• 輸入該命令后，稍等一會兒會提示輸入 project name，由于咱們已經(jīng)創(chuàng)建 example 目錄，這里輸入一個點（.）即可；
• framework 選擇 Vue；
• variant 選擇 TypeScript。

1.2 修改 package.json

生成項目后，先不要著急安裝依賴，因為有些依賴已經(jīng)在 workspace-root 中安裝了，在這個子模塊中便無需重復(fù)安裝。

修改 package.json 的 name、dependencies、devDependencies，修改后內(nèi)容如下：

{
  "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 多環(huán)境支持

這一步非必須，只是為了后面的項目開發(fā)做準備的。多環(huán)境支持在之前的文章中已經(jīng)詳細講過，各位可以翻閱之前的文章，這里僅快速操作一遍。

• 在 example 目錄下創(chuàng)建 env 目錄，并在該目錄中分別創(chuàng)建四個文件：

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 中指定環(huán)境文件目錄：

export default defineConfig({
  ...
  envDir: path.resolve(__dirname, 'env'),
	...
})

• 在 src 中創(chuàng)建 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 中測試輸入環(huán)境變量：

const env = import.meta.env
console.log(env)

1.5 測試啟動服務(wù)

執(zhí)行 pnpm run dev:dev，測試服務(wù)是否能正常啟動，然后在瀏覽器中訪問 localhost:3000，測試界面是否正常，環(huán)境變量是否正常輸出。

2 測試 foo 組件

example 能正常運行后，說明 example 已經(jīng)初始化成功，接下來便需要測試前面開發(fā)的 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 使用組件

項目創(chuàng)建時自動在 src/style.css 生成了很多樣式，可以將里面的內(nèi)容都刪除，留下一個空的 style.css 文件。

最后只需在 App.vue 中測試 foo 組件即可，修改 App.vue 如下：

<template>
  <div class="site">
    <h1>組件庫測試站點 yyg-demo-ui</h1>
    <p>測試站點主要用于開發(fā)過程中測試組件，即在開發(fā)過程中由業(yè)務(wù)驅(qū)動組件開發(fā)。</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 函數(shù)都正常運行，則 example 和 組件庫的開發(fā)環(huán)境便已完成。

3 example 打包構(gòu)建

在前面的 scripts 中添加了 build:dev、build:uat、build:prod命令，分別對應(yīng)dev、uat、prod 三個環(huán)境，咱們就以 dev 環(huán)境為例說明 example的打包構(gòu)建。

從命令行中進入 example 目錄，依次進行打包構(gòu)建、預(yù)覽：

• 執(zhí)行 pnpm run build:dev 進行打包，打包構(gòu)建成功后，會在整個項目的根目錄下生成 dist 目錄（該目錄在 vite.config.ts 中 build.outDir 配置）；
• 執(zhí)行 pnpm run preview 對打包后的文件進行預(yù)覽，訪問控制臺中輸出的端口，運行效果與上面的效果一致。

到這里，example 的開發(fā)和構(gòu)建便已經(jīng)完成，咱們可以在 example 中使用組件庫的組件。下文將介紹組件庫文檔的開發(fā)和構(gòu)建。

到此這篇關(guān)于Vue3組件庫框架搭建example環(huán)境的文章就介紹到這了,更多相關(guān)vue搭建example環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論