Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

该系列已更新文章：

分享一个实用的 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

1. 输入该命令后，稍等一会儿会提示输入 project name，由于咱们已经创建 example 目录，这里输入一个点（.）即可；
2. framework 选择 Vue；
3. 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 多环境支持

这一步非必须，只是为了后面的项目开发做准备的。多环境支持在之前的文章中已经详细讲过，各位可以翻阅之前的文章，这里仅快速操作一遍。

1. 在 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

1. 在 vite.config.ts 中指定环境文件目录：

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

1. 在 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
}

1. 修改 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"
  },
  ...
}

1. 在 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 目录，依次进行打包构建、预览：

1. 执行 pnpm run build:dev 进行打包，打包构建成功后，会在整个项目的根目录下生成 dist 目录（该目录在 vite.config.ts 中 build.outDir 配置）；
2. 执行 pnpm run preview 对打包后的文件进行预览，访问控制台中输出的端口，运行效果与上面的效果一致。

到这里，example 的开发和构建便已经完成，咱们可以在 example 中使用组件库的组件。下文将介绍组件库文档的开发和构建。

感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，程序员优雅哥会持续与大家分享更多干货