Updated articles in this series:
Share a practical vite + vue3 component library scaffolding tool to improve development efficiency.
Out-of-the-box yyg-cli scaffolding: Quickly create vue3 component library and vue3 family bucket project
Vue3 enterprise-level elegance in practice - component library framework - 1 Build pnpm monorepo
Vue3 enterprise-level elegance in practice - component library framework - 2 Initialize workspace-root
Vue3 enterprise-level elegance in practice - component library framework - 3 Build a component library development environment
Vue3 enterprise-level elegance in practice - component library framework - 4 CSS of the component library Architecture
Vue3 Enterprise-level Elegant Practice - Component Library Framework - 5 Component Library Universal Toolkit
A lot of space has been spent on setting up the development environment of the component library, including: creating components, creating component library entries, component library style architecture, and component library public packages. After a lot of work, the sample component foo cannot be previewed yet, so this article will build it . example development environment and packaging build, and use the component library in example.
1 Set up the example development environment
1.1 Create example project
example is essentially a vite3 + vue3 project. It can be created through vite, or you can use yyg-cli written by Yaya to create a family bucket project, or even build it manually. Later, programmer Elegant Brother will use example to implement a complete enterprise-level middle and back-end management project, and use it to drive the component development of the component library.
To make it simpler, here we use vite to create the example project. Enter the example directory from the command line and run:
pnpm create vite
- After entering this command, wait a moment and you will be prompted to enter the project name . Since we have already created the example directory, just enter a dot (.) here;
- Framework selects Vue ;
- variant select TypeScript .
1.2 Modify package.json
After generating the project, don't rush to install the dependencies, because some dependencies have already been installed in the workspace-root, so there is no need to install them repeatedly in this submodule.
Modify the name , dependencies , and devDependencies of package.json . The modified contents are as follows:
{
"name": "@yyg-demo-ui/example",
...
"dependencies": {
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.2.0",
"typescript": "^4.6.4"
}
}
1.3 Modify vite configuration file
The automatically generated vite.config.ts file only configures the vue plug-in. We need to configure other configurations, such as TSX plug-in, ESLint plug-in, path alias, etc.:
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 Multi-environment support
This step is not necessary, just to prepare for subsequent project development. Multi-environment support has been discussed in detail in previous articles. You can read the previous articles. Here is just a quick operation.
- Create the env directory under the example directory and create four files in this directory:
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
- Specify the environment file directory in vite.config.ts :
export default defineConfig({
...
envDir: path.resolve(__dirname, 'env'),
...
})
- Create env.d.ts file in src for type hinting:
/// <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
}
- Modify the scripts of package.json:
{
...
"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"
},
...
}
- Test the input environment variables in main.ts:
const env = import.meta.env
console.log(env)
1.5 Test startup service
Execute pnpm run dev:dev, test whether the service can start normally, and then access localhost:3000 in the browser to test whether the interface is normal and whether the environment variables are output normally.
2 Test foo component
After example can run normally, it means that example has been initialized successfully, and then you need to test the foo component developed earlier.
2.1 Install dependencies
Since the custom component library depends on element-plus , you first need to install element-plus in example :
pnpm install element-plus
Then install our local component library @yyg-demo-ui/yyg-demo-ui :
pnpm install @yyg-demo-ui/yyg-demo-ui
At this time, the package.json dependencies of example are as follows:
"dependencies": {
"@yyg-demo-ui/yyg-demo-ui": "workspace:^1.0.0",
"element-plus": "^2.2.21"
},
2.2 Introduction of component library
Introduce element-plus and custom component library respectively in main.ts :
...
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 Using components
When the project is created, many styles are automatically generated in src/style.css . You can delete all the contents inside, leaving an empty style.css file.
Finally, you only need to test the foo component in App.vue. Modify App.vue as follows:
<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 Run to see the effect
Run pnpm run dev:dev again to see the effect:
The style, function, and testLog function of the foo component are all running normally, and the development environment of example and component library is completed.
3 example package build
The build:dev , build:uat , and build:prod commands are added to the previous scripts , corresponding to the three environments of dev, uat, and prod respectively. Let's take the dev environment as an example to illustrate the packaging and construction of the example.
Enter the example directory from the command line and perform packaging, build, and preview in sequence:
- Execute pnpm run build:dev for packaging. After the packaging and building are successful, the dist directory will be generated in the root directory of the entire project (this directory is configured in build.outDir in vite.config.ts );
- Execute pnpm run preview to preview the packaged file, access the port output in the console, and the running effect is consistent with the above effect.
At this point, the development and construction of the example has been completed, and we can use the components of the component library in the example. The following describes the development and construction of component library documents.
Thank you for reading this article. If this article has given you a little help or inspiration, please support it three times in a row, like, follow, and collect. Programmer Elegant Brother will continue to share more useful information with you.