乐趣区

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

jiezi

后面用了大量篇幅介绍组件库的开发环境搭建，包含：创立组件、创立组件库入口、组件库款式架构、组件库公共包，做了一大堆工作，还不能预览示例组件 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 中应用组件库的组件。下文将介绍组件库文档的开发和构建。

退出移动版