example 本质上就是一个 vite3 + vue3 的项目,可以通过 vite 来创建,也可以通过优雅哥编写的 yyg-cli 来创建一个全家桶项目,甚至可以手动搭建。后面程序员优雅哥会用 example 来实现一个完整的企业级中后台管理项目,用它来驱动组件库的组件开发。
简单一些,这里就使用 vite 来创建 example 项目。从命令行中进入 example 目录,运行:
pnpm create vite
生成项目后,先不要着急安装依赖,因为有些依赖已经在 workspace-root 中安装了,在这个子模块中便无需重复安装。
修改 package.json 的 name、dependencies、devDependencies,修改后内容如下:
{
"name": "@yyg-demo-ui/example",
...
"dependencies": {
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.2.0",
"typescript": "^4.6.4"
}
}
自动生成的 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')
}
})
这一步非必须,只是为了后面的项目开发做准备的。多环境支持在之前的文章中已经详细讲过,各位可以翻阅之前的文章,这里仅快速操作一遍。
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
export default defineConfig({
...
envDir: path.resolve(__dirname, 'env'),
...
})
///
interface ImportMetaEnv {
readonly VITE_BASE_API: string;
readonly VITE_APP_NAME: string;
}
// eslint-disable-next-line no-unused-vars
interface ImportMeta {
readonly env: ImportMetaEnv
}
{
...
"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"
},
...
}
const env = import.meta.env
console.log(env)
执行 pnpm run dev:dev
,测试服务是否能正常启动,然后在浏览器中访问 localhost:3000,测试界面是否正常,环境变量是否正常输出。
example 能正常运行后,说明 example 已经初始化成功,接下来便需要测试前面开发的 foo 组件了。
由于自定义组件库依赖于 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"
},
在 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')
项目创建时自动在 src/style.css 生成了很多样式,可以将里面的内容都删除,留下一个空的 style.css 文件。
最后只需在 App.vue 中测试 foo 组件即可,修改 App.vue 如下:
组件库测试站点 yyg-demo-ui
测试站点主要用于开发过程中测试组件,即在开发过程中由业务驱动组件开发。
再次运行 pnpm run dev:dev,查看效果:
foo 组件的样式、功能、以及 testLog 函数都正常运行,则 example 和 组件库的开发环境便已完成。
在前面的 scripts 中添加了 build:dev、build:uat、build:prod命令,分别对应dev、uat、prod 三个环境,咱们就以 dev 环境为例说明 example的打包构建。
从命令行中进入 example 目录,依次进行打包构建、预览: