写小说的闲鱼牧云1. 为什么选择这套技术栈？
2023年企业级前端项目的技术选型已经发生了显著变化。我最近为一家中型电商平台搭建后台管理系统时，完整走了一遍Vue3+Vite+Pinia+Element Plus的技术路线，这套组合在实际开发中展现出了惊人的效率提升。
先说说版本选择背后的考量。Vue3的Composition API彻底改变了我们组织代码的方式，特别是<script setup>语法让代码量减少了约40%。有次我需要修改一个复杂表单组件的校验逻辑，在Options API时代可能要重写整个组件，现在只需要调整对应的computed和watch函数即可。
Vite的快速冷启动在大型项目中优势明显。我们项目有120+路由页面，Webpack启动需要47秒，而Vite仅需1.3秒。更关键的是HMR更新几乎瞬时完成，这对需要频繁调整UI的企业管理系统尤为重要。不过要注意的是，Vite在生产构建时默认不转译node_modules，这可能导致旧版浏览器兼容问题，需要额外配置@vitejs/plugin-legacy。
Pinia的状态管理方案比Vuex简洁得多。我们有一个跨多个模块的用户权限系统，用Pinia实现后代码量减少了60%，而且TypeScript支持完美。特别推荐使用storeToRefs解构存储，可以保持响应式的同时避免.value的繁琐写法。
Element Plus作为UI库的选择可能有些争议，但它的表单和表格组件在企业级应用中确实无可替代。我们做过对比测试，实现同样的复杂筛选表格，使用Element Plus比Ant Design Vue节省了35%的开发时间。最新版的暗黑模式支持也让客户非常满意。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境搭建与项目初始化
2.1 创建Vite项目的最佳实践
不要直接使用npm create vite的默认模板！我推荐这样初始化项目：
bash复制npm create vite@latest my-enterprise-app --template vue-ts
cd my-enterprise-app
npm install
然后立即做三件事：
- 修改vite.config.ts的基础配置：
typescript复制export default defineConfig({
base: '/admin/', // 企业项目通常有特定路径
server: {
port: 3001,
proxy: {
'/api': {
target: 'http://backend:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
- 添加必要的开发依赖：
bash复制npm install -D @types/node @vitejs/plugin-vue-components unplugin-auto-import
- 配置IDE（以VS Code为例）：
- 安装Volar扩展
- 设置.json文件中添加：
json复制"volar.takeOverMode.enabled": true
2.2 企业级项目结构设计
经过多个项目验证，我推荐这样的目录结构：
code复制src/
├── apis/ # API请求封装
├── assets/ # 静态资源
├── components/ # 公共组件
│ ├── business/ # 业务组件
│ └── base/ # 基础UI组件
├── composables/ # 组合式函数
├── directives/ # 自定义指令
├── router/ # 路由配置
├── stores/ # Pinia状态库
├── styles/ # 全局样式
├── types/ # TS类型定义
├── utils/ # 工具函数
├── views/ # 页面组件
└── App.vue
关键技巧：在vite.config.ts中配置路径别名：
typescript复制resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'#': path.resolve(__dirname, './types')
}
}
3. Pinia状态管理深度实践
3.1 企业级状态设计模式
用户认证存储的典型实现：
typescript复制// stores/auth.ts
export const useAuthStore = defineStore('auth', () => {
const token = ref(localStorage.getItem('token') || '')
const user = ref<UserInfo | null>(null)
const isAdmin = computed(() => user.value?.role === 'admin')
async function login(credentials: LoginDto) {
const res = await api.auth.login(credentials)
token.value = res.token
user.value = res.user
localStorage.setItem('token', res.token)
}
function logout() {
token.value = ''
user.value = null
localStorage.removeItem('token')
}
return { token, user, isAdmin, login, logout }
})
3.2 状态持久化方案
推荐使用pinia-plugin-persistedstate：
typescript复制import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
然后在store中配置：
typescript复制defineStore('auth', () => {
// ...
}, {
persist: {
paths: ['token'],
storage: sessionStorage // 可选不同的存储方式
}
})
3.3 跨Store通信方案
当多个store需要交互时，最佳实践是：
typescript复制// stores/user.ts
export const useUserStore = defineStore('user', () => {
const authStore = useAuthStore()
const canEdit = computed(() => {
return authStore.isAdmin || /* 其他条件 */
})
// ...
})
4. Element Plus企业级应用技巧
4.1 表单验证的进阶用法
动态表单验证的黄金组合：
vue复制<el-form
:model="form"
:rules="rules"
ref="formRef"
label-position="top"
>
<el-form-item
v-for="field in dynamicFields"
:key="field.prop"
:prop="field.prop"
:label="field.label"
>
<component
:is="field.component"
v-model="form[field.prop]"
v-bind="field.props"
/>
</el-form-item>
</el-form>
配合TypeScript的类型定义：
typescript复制interface FormField {
prop: keyof typeof form
label: string
component: Component
props?: Record<string, any>
}
const form = reactive({
username: '',
password: '',
// ...
})
const rules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' }
],
// ...
}
4.2 表格性能优化方案
处理万级数据表格的关键技巧：
vue复制<el-table
:data="tableData"
height="600"
row-key="id"
:row-class-name="tableRowClassName"
@row-click="handleRowClick"
>
<el-table-column
v-for="col in columns"
:key="col.prop"
:prop="col.prop"
:label="col.label"
:width="col.width"
:fixed="col.fixed"
>
<template #default="{ row }">
<component
:is="col.component || 'span'"
:row="row"
:prop="col.prop"
/>
</template>
</el-table-column>
</el-table>
配合虚拟滚动优化：
typescript复制import { useVirtualList } from '@vueuse/core'
const { list, containerProps, wrapperProps } = useVirtualList(
tableData,
{
itemHeight: 56,
overscan: 10
}
)
5. 企业级项目实战技巧
5.1 权限控制系统实现
路由守卫的完整实现方案：
typescript复制// router/index.ts
router.beforeEach(async (to) => {
const authStore = useAuthStore()
if (!authStore.token && to.meta.requiresAuth) {
return { path: '/login', query: { redirect: to.fullPath } }
}
if (to.meta.permissions) {
const userStore = useUserStore()
await userStore.fetchPermissions()
if (!userStore.hasPermission(to.meta.permissions)) {
return { path: '/403' }
}
}
})
动态菜单生成方案：
vue复制<el-menu :default-active="activeMenu">
<template v-for="route in permissionRoutes">
<el-sub-menu
v-if="route.children"
:key="route.path"
:index="route.path"
>
<template #title>
<el-icon><component :is="route.meta.icon" /></el-icon>
<span>{{ route.meta.title }}</span>
</template>
<menu-item :routes="route.children" />
</el-sub-menu>
<el-menu-item
v-else
:key="route.path"
:index="route.path"
@click="router.push(route.path)"
>
<el-icon><component :is="route.meta.icon" /></el-icon>
<span>{{ route.meta.title }}</span>
</el-menu-item>
</template>
</el-menu>
5.2 错误处理与日志收集
全局错误拦截器：
typescript复制// utils/request.ts
instance.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
const authStore = useAuthStore()
authStore.logout()
router.push('/login')
}
const errorLog = {
time: new Date().toISOString(),
url: error.config.url,
method: error.config.method,
status: error.response?.status,
message: error.message
}
logError(errorLog)
return Promise.reject(error)
}
)
前端性能监控：
typescript复制// main.ts
const metrics = {
FCP: 0,
LCP: 0,
FID: 0
}
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
metrics.FCP = entry.startTime
} else if (entry.name === 'largest-contentful-paint') {
metrics.LCP = entry.startTime
}
}
})
observer.observe({ type: 'paint', buffered: true })
observer.observe({ type: 'largest-contentful-paint', buffered: true })
window.addEventListener('load', () => {
navigator.sendBeacon('/api/metrics', JSON.stringify(metrics))
})
6. 构建优化与部署策略
6.1 分包优化方案
vite.config.ts的关键配置：
typescript复制build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
if (id.includes('element-plus')) {
return 'element'
}
if (id.includes('lodash')) {
return 'lodash'
}
return 'vendor'
}
}
}
},
chunkSizeWarningLimit: 1000
}
6.2 按需加载的极致优化
组件自动导入配置（vite.config.ts）：
typescript复制plugins: [
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
directives: true,
version: '2.3.0'
})
],
dts: 'types/components.d.ts'
}),
AutoImport({
imports: [
'vue',
'vue-router',
'pinia',
{
'@vueuse/core': [
'useMouse',
'useDebounceFn'
]
}
],
dts: 'types/auto-imports.d.ts'
})
]
6.3 Docker生产部署
完整的Dockerfile示例：
dockerfile复制FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
配套的nginx.conf：
nginx复制server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}
7. 企业项目中的TypeScript实践
7.1 类型定义的最佳组织方式
推荐的类型目录结构：
code复制types/
├── api/ # API响应类型
├── business/ # 业务实体类型
├── component/ # 组件Props类型
├── store/ # Pinia存储类型
└── index.ts # 全局类型导出
示例业务类型定义：
typescript复制// types/business/user.ts
interface UserProfile {
id: number
username: string
avatar?: string
roles: string[]
department: {
id: number
name: string
}
}
type UserStatus = 'active' | 'disabled' | 'pending'
// types/index.ts
export type { UserProfile, UserStatus } from './business/user'
7.2 组件Props的严格类型检查
使用泛型组件Props：
typescript复制// components/DataTable.vue
interface Column<T = any> {
prop: keyof T
label: string
width?: number
formatter?: (row: T) => string
}
defineProps<{
data: T[]
columns: Array<Column<T>>
loading?: boolean
selection?: boolean
}>()
8. 测试与质量保障体系
8.1 单元测试配置
vitest的推荐配置：
typescript复制// vite.config.ts
test: {
globals: true,
environment: 'jsdom',
coverage: {
provider: 'istanbul',
reporter: ['text', 'json', 'html'],
thresholds: {
lines: 80,
functions: 80,
branches: 80,
statements: 80
}
}
}
Pinia存储的测试示例：
typescript复制import { setActivePinia, createPinia } from 'pinia'
import { useAuthStore } from '@/stores/auth'
describe('Auth Store', () => {
beforeEach(() => {
setActivePinia(createPinia())
localStorage.clear()
})
it('should login and store token', async () => {
const store = useAuthStore()
await store.login({ username: 'admin', password: '123456' })
expect(store.token).toBeTruthy()
expect(localStorage.getItem('token')).toBe(store.token)
})
})
8.2 E2E测试方案
使用Cypress的推荐配置：
javascript复制// cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3001',
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
return config
}
},
viewportWidth: 1920,
viewportHeight: 1080
})
典型页面测试用例：
javascript复制describe('Login Page', () => {
it('should login successfully', () => {
cy.visit('/login')
cy.get('#username').type('admin')
cy.get('#password').type('123456')
cy.get('button[type=submit]').click()
cy.url().should('include', '/dashboard')
})
})
9. 微前端集成方案
9.1 Module Federation配置
主应用配置（vite.config.ts）：
typescript复制import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
export default defineConfig({
plugins: [
federation({
name: 'host-app',
remotes: {
auth: 'http://localhost:5001/assets/remoteEntry.js',
product: 'http://localhost:5002/assets/remoteEntry.js'
},
shared: ['vue', 'pinia', 'vue-router']
})
],
build: {
target: 'esnext'
}
})
子应用配置示例：
typescript复制federation({
name: 'auth-module',
filename: 'remoteEntry.js',
exposes: {
'./AuthPages': './src/views/Auth/*.vue'
},
shared: ['vue', 'pinia']
})
9.2 微前端路由管理
动态路由加载方案：
typescript复制// router/index.ts
const routes = [
{
path: '/auth/*',
component: () => import('auth/AuthPages')
},
{
path: '/products/*',
component: () => import('product/ProductPages')
}
]
10. 项目升级与维护策略
10.1 依赖更新最佳实践
安全的依赖更新流程：
- 创建独立分支：
git checkout -b chore/update-deps - 安装npm-check-updates：
npm install -g npm-check-updates - 检查可更新依赖：
ncu - 交互式更新：
ncu -i - 安装测试：
npm install - 全面测试：
- 单元测试：
npm run test:unit - 类型检查：
npm run type-check - 本地运行：
npm run dev
- 单元测试：
- 提交更新：
git commit -am "chore: update dependencies"
10.2 版本迁移检查清单
从Vue2迁移到Vue3的关键步骤：
- 安装迁移工具：
npm install @vue/compat - 配置兼容模式（vite.config.ts）：
typescript复制resolve: {
alias: {
vue: '@vue/compat'
}
}
- 逐步修复控制台警告
- 移除兼容模式并全面启用Vue3特性
- 重构Options API为Composition API
11. 性能监控与优化实战
11.1 首屏加载优化方案
关键优化措施：
- 预加载关键资源：
html复制<link rel="preload" href="/assets/main.js" as="script">
<link rel="preload" href="/assets/vendor.js" as="script">
- 关键CSS内联：
typescript复制import { extractCritical } from 'critical-style'
const { css } = extractCritical(fs.readFileSync('dist/index.html', 'utf8'))
- 图片优化策略：
typescript复制// vite.config.ts
import { imagemin } from 'vite-plugin-imagemin'
plugins: [
imagemin({
gifsicle: { optimizationLevel: 7 },
mozjpeg: { quality: 70 },
pngquant: { quality: [0.7, 0.8] },
svgo: {
plugins: [
{ name: 'removeViewBox' },
{ name: 'removeEmptyAttrs', active: false }
]
}
})
]
11.2 内存泄漏检测方案
使用Chrome DevTools的内存分析：
- 打开DevTools → Memory
- 录制堆内存快照
- 执行典型用户操作
- 再次录制堆内存快照
- 比较两次快照，查找未被释放的对象
常见内存泄漏场景：
- 未取消的事件监听器
- 未清理的定时器
- 全局变量持有DOM引用
- 未卸载的第三方库实例
12. 国际化与企业规范
12.1 多语言实现方案
推荐使用vue-i18n v9：
typescript复制// plugins/i18n.ts
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false,
locale: localStorage.getItem('lang') || 'zh-CN',
fallbackLocale: 'en-US',
messages: {
'zh-CN': zhMessages,
'en-US': enMessages
}
})
// App.vue
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
Element Plus国际化：
typescript复制import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
const i18n = createI18n({
// ...
})
const app = createApp(App)
app.use(ElementPlus, {
locale: i18n.global.locale.value === 'zh-CN' ? zhCn : en
})
12.2 企业前端规范实施
ESLint推荐配置：
javascript复制// .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'@vue/typescript/recommended',
'plugin:prettier/recommended'
],
rules: {
'vue/multi-word-component-names': 'off',
'vue/component-tags-order': ['error', {
order: ['script', 'template', 'style']
}],
'@typescript-eslint/no-explicit-any': 'off'
}
}
Git提交规范：
code复制<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
常用type类型：
- feat：新功能
- fix：bug修复
- docs：文档变更
- style：代码格式
- refactor：重构代码
- test：测试相关
- chore：构建过程或辅助工具变更
13. 移动端适配方案
13.1 响应式布局实践
Element Plus的响应式断点：
scss复制// styles/responsive.scss
@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
@include res(xs) {
// 超小屏幕样式
}
@include res(sm) {
// 小屏幕样式
}
@include res(md) {
// 中等屏幕样式
}
@include res(lg) {
// 大屏幕样式
}
@include res(xl) {
// 超大屏幕样式
}
13.2 移动端手势支持
使用@vueuse/gesture：
vue复制<script setup>
import { useGesture } from '@vueuse/gesture'
const el = ref(null)
useGesture(
{
onDrag: ({ active, movement: [mx] }) => {
if (active) {
el.value.style.transform = `translateX(${mx}px)`
} else {
el.value.style.transform = 'translateX(0)'
}
}
},
{ domTarget: el }
)
</script>
14. 高级调试技巧
14.1 组件实例调试
在控制台访问组件实例：
javascript复制// 获取根实例
const app = window.__vue_app__
// 通过DOM元素获取组件实例
const el = document.querySelector('.some-component')
const comp = el.__vue_parent__ || el.__vue__
// 查看组件状态
console.log(comp.$.setupState)
14.2 Pinia状态追踪
开发工具配置：
typescript复制// main.ts
import { createPinia } from 'pinia'
const pinia = createPinia()
pinia.use(({ store }) => {
store.$onAction(({ name, args, after, onError }) => {
console.log(`Action ${name} called with`, args)
after((result) => {
console.log(`Action ${name} resolved with`, result)
})
onError((error) => {
console.error(`Action ${name} failed with`, error)
})
})
})
15. 项目文档体系
15.1 组件文档生成
使用VitePress + @vuedoc/md：
markdown复制# Button 按钮
::: tip
常用的操作按钮
:::
## Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| type | 按钮类型 | `primary` \| `success` \| `warning` \| `danger` | `primary` |
| size | 按钮尺寸 | `large` \| `default` \| `small` | `default` |
## Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| click | 点击事件 | MouseEvent |
15.2 API文档自动化
使用Swagger UI + TypeScript类型生成：
typescript复制// scripts/generate-api-docs.ts
import { generate } from 'openapi-typescript-codegen'
import { readFileSync } from 'fs'
const spec = JSON.parse(readFileSync('swagger.json', 'utf8'))
generate({
input: spec,
output: 'src/apis',
clientName: 'ApiClient'
})
16. 安全防护策略
16.1 XSS防护方案
Element Plus的安全实践：
vue复制<el-table :data="tableData">
<el-table-column prop="content" label="内容">
<template #default="{ row }">
<div v-html="sanitizeHtml(row.content)"></div>
</template>
</el-table-column>
</el-table>
使用DOMPurify：
typescript复制import DOMPurify from 'dompurify'
function sanitizeHtml(html: string) {
return DOMPurify.sanitize(html, {
ALLOWED_TAGS: ['b', 'i', 'u', 'br'],
ALLOWED_ATTR: ['class']
})
}
16.2 CSRF防护实现
Axios全局配置：
typescript复制// utils/request.ts
const instance = axios.create({
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
xsrfCookieName: 'csrftoken',
xsrfHeaderName: 'X-CSRFToken'
})
17. 主题定制方案
17.1 Element Plus主题定制
推荐使用SCSS变量覆盖：
scss复制// styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #1890ff,
),
),
$menu: (
'backgroundColor': transparent,
'hoverBackgroundColor': rgba(0, 0, 0, 0.06)
)
);
@use "element-plus/theme-chalk/src/index.scss" as *;
17.2 暗黑模式切换
使用vueuse的方案：
vue复制<script setup>
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
<el-switch v-model="isDark" @change="toggleDark" />
</template>
配套的CSS变量：
css复制:root {
--bg-color: #ffffff;
--text-color: #303133;
}
.dark {
--bg-color: #1a1a1a;
--text-color: #e5e5e5;
}
18. 服务端渲染方案
18.1 Nuxt3集成Element Plus
nuxt.config.ts配置：
typescript复制export default defineNuxtConfig({
css: ['element-plus/dist/index.css'],
build: {
transpile: ['element-plus']
},
vite: {
plugins: [
Components({
resolvers: [ElementPlusResolver()]
})
]
}
})
18.2 数据预取策略
组合式API的使用：
vue复制<script setup>
const { data: products } = await useAsyncData('products', () => {
return $fetch('/api/products')
})
</script>
<template>
<el-table :data="products">
<!-- 表格列 -->
</el-table>
</template>
19. 可视化大屏方案
19.1 ECharts集成
封装为可复用组件：
vue复制<script setup lang="ts">
import * as echarts from 'echarts'
const props = defineProps<{
options: echarts.EChartsOption
theme?: string
autoresize?: boolean
}>()
const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts | null = null
onMounted(() => {
chart = echarts.init(chartRef.value!, props.theme)
chart.setOption(props.options)
if (props.autoresize) {
window.addEventListener('resize', resizeHandler)
}
})
function resizeHandler() {
chart?.resize()
}
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chart?.dispose()
})
watch(() => props.options, (val) => {
chart?.setOption(val)
}, { deep: true })
</script>
<template>
<div ref="chartRef" class="echarts-container"></div>
</template>
<style scoped>
.echarts-container {
width: 100%;
height: 100%;
}
</style>
19.2 数据实时更新
使用WebSocket的示例：
typescript复制// composables/useLiveData.ts
export function useLiveData(url: string, callback: (data: any) => void) {
const socket = new WebSocket(url)
socket.onmessage = (event) => {
const data = JSON.parse(event.data)
callback(data)
}
onUnmounted(() => {
socket.close()
})
return {
close: () => socket.close()
}
}
20. 项目交接与知识沉淀
20.1 交接文档模板
code复制# 项目交接文档
## 1. 项目概述
- 业务背景
- 技术架构图
- 核心功能模块
## 2. 开发环境
- 依赖安装说明
- 环境变量配置
- 本地代理设置
## 3. 代码规范
- 目录结构说明
- 命名约定
- 提交规范
## 4. 构建部署
- CI/CD流程
- 环境差异配置
- 回滚方案
## 5. 常见问题
- 已知问题列表
- 典型错误解决方案
- 性能优化点
## 6. 扩展开发
- 添加新页面的流程
- 接口联调指南
- 组件开发规范
20.2 知识管理系统
推荐使用Vitepress搭建：
markdown复制# 前端知识库
## 技术规范
- [代码规范](/standards/code-style)
- [Git工作流](/standards/git-flow)
## 组件文档
- [基础组件](/components/base)
- [业务组件](/components/business)
## 解决方案
- [权限系统](/solutions/auth)
- [性能优化](/solutions/performance)
配套的自动化脚本：
json复制{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs",
"docs:update": "node scripts/generate-component-docs.js"
}
}