共计 3585 个字符，预计需要花费 9 分钟才能阅读完成。
后面用了大量篇幅介绍组件库的开发环境搭建，包含：创立组件、创立组件库入口、组件库款式架构、组件库公共包，做了一大堆工作，还不能预览示例组件 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=productionexample/env/.env.uat：
VITE_BASE_API=/uat-apiexample/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 中应用组件库的组件。下文将介绍组件库文档的开发和构建。
