三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

Vue3项目创建与环境配置全指南

发布时间：2026/8/10 2:16:42 三亩地 编程学习日记
Vue3项目创建与环境配置全指南

1. Vue3 项目创建基础与环境准备

作为前端开发者，当你准备开始一个全新的Vue3项目时，首先要确保开发环境配置正确。与Vue2时代不同，Vue3的生态系统已经全面转向现代构建工具链，这带来了更高效的开发体验。

1.1 Node.js 版本选择与安装

Vue3官方推荐使用Node.js 16.0或更高版本。在实际项目中，我建议选择LTS（长期支持）版本以确保稳定性。可以通过以下命令检查当前Node版本：

node -v

如果版本不符合要求，可以使用nvm（Node Version Manager）进行多版本管理：

nvm install 16.14.2 # 安装指定版本 nvm use 16.14.2 # 使用该版本

注意：Windows用户可以使用nvm-windows替代nvm，但要注意管理员权限问题

1.2 包管理工具的选择

现代前端项目通常使用npm、yarn或pnpm作为包管理工具。根据我的经验，pnpm在依赖管理和安装速度上表现更优：

npm install -g pnpm # 全局安装pnpm pnpm --version # 检查安装是否成功

pnpm采用硬链接方式存储依赖，可以显著减少磁盘空间占用，特别适合同时维护多个Vue3项目的开发者。

1.3 Vue CLI与Vite的选择

Vue3支持两种主流的项目创建方式：

  1. 传统方式：使用Vue CLI（@vue/cli）

    npm install -g @vue/cli vue create my-project

  2. 现代方式：使用Vite（推荐）

    pnpm create vite my-project --template vue

在实际项目中，我更推荐使用Vite。它基于原生ESM，启动速度极快，热更新几乎瞬间完成。特别是在大型项目中，Vite的优越性更加明显。

2. 使用Vite创建Vue3项目详解

2.1 项目初始化流程

让我们详细看看使用Vite创建Vue3项目的完整过程：

pnpm create vite vue3-demo --template vue cd vue3-demo pnpm install pnpm run dev

执行上述命令后，Vite会创建一个包含以下核心结构的项目：

vue3-demo/ ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 模块资源 │ ├── components/ # 公共组件 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── index.html # 页面入口 ├── vite.config.js # Vite配置 └── package.json # 项目配置

2.2 关键文件解析

main.js- Vue3的入口文件与Vue2有显著不同：

import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app')

这里使用了createApp工厂函数，而不是Vue2的new Vue()构造函数。这种改变带来了更好的TypeScript支持和更灵活的API设计。

App.vue- 单文件组件的基本结构：

<script setup> import HelloWorld from './components/HelloWorld.vue' </script> <template> <div> <HelloWorld msg="Vue3 + Vite" /> </div> </template> <style scoped> /* 样式部分 */ </style>

注意<script setup>语法糖，这是Vue3的组合式API的编译时语法糖，可以大大简化代码。

2.3 项目配置调优

默认生成的vite.config.js可能需要根据项目需求进行调整：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 8080, // 自定义端口 open: true, // 自动打开浏览器 host: '0.0.0.0' // 允许局域网访问 }, resolve: { alias: { '@': path.resolve(__dirname, './src') // 配置路径别名 } } })

3. Vue3项目的高级配置

3.1 集成TypeScript

Vue3对TypeScript的支持是第一优先级的。要在现有项目中添加TypeScript支持：

pnpm add -D typescript vue-tsc

然后重命名文件：

  • main.js→main.ts
  • App.vue中的<script>→<script lang="ts">

创建tsconfig.json：

{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] }

3.2 状态管理：Pinia vs Vuex

Vue3推荐使用Pinia作为状态管理库，它比Vuex更简洁且支持TypeScript：

pnpm add pinia

在main.ts中配置：

import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.mount('#app')

创建一个store示例：

// stores/counter.ts import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } })

3.3 路由配置：Vue Router 4

Vue3需要使用Vue Router 4.x版本：

pnpm add vue-router@4

基本配置示例：

// router/index.ts import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } ] }) export default router

4. 开发工具与最佳实践

4.1 VS Code插件推荐

为了获得更好的Vue3开发体验，建议安装以下VS Code插件：

  1. Volar- Vue3官方推荐的替代Vetur的插件
  2. TypeScript Vue Plugin- 增强Vue文件的TypeScript支持
  3. ESLint- 代码质量检查
  4. Prettier- 代码格式化
  5. Iconify IntelliSense- 图标自动补全

4.2 代码规范配置

建议在项目中配置ESLint和Prettier：

pnpm add -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier

创建.eslintrc.js：

module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'prettier', ], parserOptions: { ecmaVersion: 2020, }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/multi-word-component-names': 'off', }, }

4.3 性能优化技巧

  1. 组件懒加载：

    const About = () => import('./views/About.vue')

  2. 组合式函数复用：

    // composables/useMouse.ts import { ref, onMounted, onUnmounted } from 'vue' export function useMouse() { const x = ref(0) const y = ref(0) function update(e: MouseEvent) { x.value = e.pageX y.value = e.pageY } onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) return { x, y } }

  3. 静态资源处理：

    • 小图片转为Base64
    • 使用WebP格式替代PNG/JPG
    • 合理使用<img>的loading="lazy"属性

5. 常见问题与解决方案

5.1 浏览器兼容性问题

Vue3默认支持现代浏览器。如果需要支持旧版浏览器，可以配置@vitejs/plugin-legacy：

pnpm add @vitejs/plugin-legacy

在vite.config.js中：

import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ legacy({ targets: ['defaults', 'not IE 11'] }) ] })

5.2 样式隔离与预处理器

Vue3支持多种CSS预处理器：

pnpm add -D sass less stylus

使用示例：

<style lang="scss" scoped> /* 支持Sass语法 */ </style>

提示：scoped样式虽然方便，但在深层嵌套组件中可能导致性能问题。对于大型项目，建议考虑CSS Modules或BEM命名规范

5.3 全局API变更适配

Vue3中许多全局API发生了变化，常见的有：

  1. 事件总线替代方案：

    // mitt是一个轻量级事件发射器 import mitt from 'mitt' const emitter = mitt() // 发送事件 emitter.emit('foo', { data: 'bar' }) // 监听事件 emitter.on('foo', (data) => { console.log(data) })

  2. 过滤器移除： Vue3移除了过滤器，建议使用方法或计算属性替代：

    // 替代方案 const formatDate = (value: string) => { return new Date(value).toLocaleDateString() }

  3. v-model变更： Vue3中v-model的prop和event默认名称改为modelValue和update:modelValue

6. 项目结构与架构设计

6.1 推荐的项目目录结构

基于实际项目经验，我推荐以下目录结构：

src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 │ ├── base/ # 基础UI组件 │ └── business/ # 业务组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue # 根组件 └── main.ts # 入口文件

6.2 组件设计原则

  1. 单一职责原则：每个组件只做一件事
  2. 明确接口：通过TypeScript定义清晰的props和emits
  3. 合理拆分：大型组件拆分为多个小组件
  4. 逻辑复用：使用组合式函数提取可复用逻辑

6.3 API请求封装

建议使用axios进行HTTP请求封装：

// api/http.ts import axios from 'axios' const http = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器 http.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // 响应拦截器 http.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { // 处理未授权 } return Promise.reject(error) } ) export default http

7. 测试与部署

7.1 单元测试配置

Vue3推荐使用Vitest进行单元测试：

pnpm add -D vitest @vue/test-utils jsdom

配置vitest.config.ts：

import { defineConfig } from 'vitest/config' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], test: { environment: 'jsdom', globals: true } })

测试示例：

import { mount } from '@vue/test-utils' import Counter from '../Counter.vue' test('increments counter', async () => { const wrapper = mount(Counter) await wrapper.find('button').trigger('click') expect(wrapper.find('span').text()).toBe('1') })

7.2 生产环境构建

Vite提供了优化的生产构建：

pnpm run build

构建结果默认输出到dist目录。可以根据需要配置构建选项：

// vite.config.js export default defineConfig({ build: { outDir: 'build', assetsInlineLimit: 4096, // 小于4KB的资产内联 rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { return 'vendor' } } } } } })

7.3 部署策略

  1. 静态资源部署：

    • 可以直接将dist目录上传到CDN或静态托管服务
    • 推荐使用Vercel、Netlify等现代部署平台

  2. Docker部署：

    # Dockerfile FROM node:16-alpine as builder WORKDIR /app COPY package.json pnpm-lock.yaml ./ RUN pnpm install COPY . . RUN pnpm run build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

  3. CI/CD集成： 可以在GitHub Actions等CI平台配置自动化部署流程

8. 进阶主题与扩展

8.1 微前端集成

Vue3可以很好地融入微前端架构。以qiankun为例：

// 主应用配置 import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vue3-app', entry: '//localhost:7101', container: '#subapp-container', activeRule: '/vue3' } ]) start()

子应用需要导出生命周期钩子：

// 子应用入口 import { createApp } from 'vue' import App from './App.vue' let app: any function render(props: any) { const { container } = props app = createApp(App) app.mount(container ? container.querySelector('#app') : '#app') } export async function bootstrap() { console.log('vue3 app bootstraped') } export async function mount(props: any) { render(props) } export async function unmount() { app.unmount() }

8.2 服务端渲染(SSR)

使用Vite创建SSR应用：

pnpm create vite vue3-ssr --template vue cd vue3-ssr pnpm add @vitejs/plugin-vue @vue/server-renderer

配置SSR入口：

// server.js import express from 'express' import { createServer } from 'vite' import { renderToString } from '@vue/server-renderer' import { createApp } from './src/main' const app = express() const vite = await createServer({ server: { middlewareMode: true }, appType: 'custom' }) app.use(vite.middlewares) app.use('*', async (req, res) => { const { app } = createApp() const html = await renderToString(app) res.status(200).set({ 'Content-Type': 'text/html' }).end(` <!DOCTYPE html> <html> <head> <title>Vue3 SSR</title> </head> <body> <div id="app">${html}</div> <script type="module" src="/src/entry-client.js"></script> </body> </html> `) }) app.listen(3000)

8.3 移动端适配

对于移动端项目，建议配置：

  1. 视口适配：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  2. REM适配：

    // utils/rem.js const setRem = () => { const docEl = document.documentElement const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' const recalc = () => { const clientWidth = docEl.clientWidth if (!clientWidth) return docEl.style.fontSize = 100 * (clientWidth / 750) + 'px' } window.addEventListener(resizeEvt, recalc, false) document.addEventListener('DOMContentLoaded', recalc, false) } export default setRem

  3. 移动端组件库：

    • Vant 4：专为Vue3设计的移动端组件库
    • Varlet：基于Vue3的Material风格移动端组件库

9. 生态工具与插件推荐

9.1 UI组件库

  1. Element Plus：Vue3版本的Element UI

    pnpm add element-plus

  2. Ant Design Vue：Ant Design的Vue3实现

    pnpm add ant-design-vue@next

  3. Naive UI：TypeScript友好的Vue3组件库

    pnpm add naive-ui

9.2 实用工具库

  1. VueUse：Vue3组合式API实用工具集合

    pnpm add @vueuse/core

  2. unplugin-auto-import：自动导入API

    pnpm add -D unplugin-auto-import

    配置：

    // vite.config.js import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ imports: ['vue', 'vue-router', 'pinia'], dts: 'src/auto-imports.d.ts' }) ] })

  3. vue-i18n：国际化支持

    pnpm add vue-i18n@9

9.3 可视化图表

  1. ECharts：强大的可视化库

    pnpm add echarts vue-echarts

  2. Chart.js：轻量级图表库

    pnpm add chart.js vue-chart-3

  3. D3.js：数据驱动文档

    pnpm add d3

10. 性能监控与优化

10.1 性能分析工具

  1. Chrome DevTools：

    • 使用Performance面板记录运行时性能
    • 使用Lighthouse进行综合性能评估

  2. web-vitals：

    pnpm add web-vitals

    使用示例：

    import { getCLS, getFID, getLCP } from 'web-vitals' getCLS(console.log) getFID(console.log) getLCP(console.log)

  3. Vite插件：

    pnpm add -D vite-plugin-inspect

10.2 代码分割策略

  1. 路由级分割：

    const About = () => import('./views/About.vue')

  2. 组件级分割：

    <script setup> const HeavyComponent = defineAsyncComponent( () => import('./components/HeavyComponent.vue') ) </script>

  3. 第三方库分割：

    // vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vue: ['vue', 'vue-router', 'pinia'], echarts: ['echarts'] } } } } })

10.3 缓存策略优化

  1. 文件指纹：

    // vite.config.js export default defineConfig({ build: { rollupOptions: { output: { assetFileNames: 'assets/[name]-[hash][extname]', chunkFileNames: 'js/[name]-[hash].js', entryFileNames: 'js/[name]-[hash].js' } } } })

  2. Service Worker： 使用Workbox实现离线缓存：

    pnpm add workbox-core workbox-routing workbox-strategies

  3. HTTP缓存头： 在服务器配置适当的缓存头：

    Cache-Control: public, max-age=31536000, immutable

11. 安全最佳实践

11.1 常见安全风险

  1. XSS防护：

    • 使用v-html时要确保内容经过净化
    • 推荐使用DOMPurify：
      pnpm add dompurify

  2. CSRF防护：

    • 确保API请求携带CSRF Token
    • 配置axios：
      http.interceptors.request.use(config => { config.headers['X-CSRF-TOKEN'] = getCSRFToken() return config })

  3. 依赖安全：

    • 定期检查依赖漏洞：
      pnpm audit
    • 使用dependabot自动更新依赖

11.2 环境变量管理

  1. .env文件：

    VITE_API_BASE_URL=https://api.example.com VITE_DEBUG=true

  2. 类型安全：

    // env.d.ts interface ImportMetaEnv { readonly VITE_API_BASE_URL: string readonly VITE_DEBUG: string }

  3. 生产环境保护：

    • 不要在前端代码中暴露敏感信息
    • 使用服务器端环境变量注入

11.3 内容安全策略(CSP)

配置适当的CSP头：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.example.com; connect-src 'self' https://api.example.com; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none';

12. 项目升级与维护

12.1 从Vue2迁移到Vue3

  1. 官方迁移工具：

    pnpm add -D @vue/compat

    配置：

    // vite.config.js export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { compatConfig: { MODE: 2 // 启用兼容模式 } } } }) ] })

  2. 主要变更点：

    • 全局API改为应用实例API
    • 事件总线模式变更
    • v-model语法变更
    • 过滤器移除
    • 生命周期钩子重命名

  3. 逐步迁移策略：

    • 先启用兼容模式
    • 逐个组件迁移
    • 最后移除兼容模式

12.2 依赖更新策略

  1. 版本锁定：

    pnpm install --save-exact package@version

  2. 自动更新： 使用npm-check-updates：

    pnpm add -g npm-check-updates ncu -u pnpm install

  3. 变更日志检查：

    • 检查GitHub Releases
    • 查看Breaking Changes

12.3 长期维护建议

  1. 文档化：

    • 项目README
    • 组件文档
    • API文档

  2. 测试覆盖：

    • 单元测试
    • E2E测试
    • 快照测试

  3. 性能监控：

    • 持续性能测试
    • 错误监控
    • 用户行为分析

13. 实战案例：电商后台管理系统

13.1 项目初始化

pnpm create vite vue3-admin --template vue-ts cd vue3-admin pnpm add pinia vue-router@4 axios element-plus @element-plus/icons-vue pnpm add -D sass mockjs @types/mockjs

13.2 核心功能实现

  1. 登录认证：

    // stores/auth.ts import { defineStore } from 'pinia' import { login, logout } from '@/api/auth' export const useAuthStore = defineStore('auth', { state: () => ({ token: localStorage.getItem('token') || '', userInfo: null }), actions: { async login(username: string, password: string) { const { token } = await login(username, password) this.token = token localStorage.setItem('token', token) }, async logout() { await logout() this.token = '' localStorage.removeItem('token') } } })

  2. 权限控制：

    // router/index.ts router.beforeEach(async (to) => { const auth = useAuthStore() if (to.meta.requiresAuth && !auth.token) { return '/login' } })

  3. 表格组件封装：

    <script setup lang="ts"> import { ref } from 'vue' const props = defineProps({ columns: Array, data: Array, loading: Boolean }) const tableRef = ref() defineExpose({ getSelection: () => tableRef.value?.getSelectionRows() }) </script> <template> <el-table ref="tableRef" :data="data" v-loading="loading" > <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" /> </el-table> </template>

13.3 性能优化实践

  1. 虚拟滚动：

    pnpm add @vueuse/core
    <script setup> import { useVirtualList } from '@vueuse/core' const allItems = Array.from({ length: 10000 }, (_, i) => i) const { list, containerProps, wrapperProps } = useVirtualList( allItems, { itemHeight: 22 } ) </script> <template> <div v-bind="containerProps" style="height: 300px; overflow: auto"> <div v-bind="wrapperProps"> <div v-for="item in list" :key="item.index"> Row {{ item.data }} </div> </div> </div> </template>

  2. 图片懒加载：

    pnpm add @vueuse/core
    <script setup> import { useIntersectionObserver } from '@vueuse/core' const imgRef = ref() const src = ref('') useIntersectionObserver( imgRef, ([{ isIntersecting }]) => { if (isIntersecting) { src.value = 'real-image-url.jpg' } } ) </script> <template> <img ref="imgRef" :src="src" /> </template>

14. 调试技巧与问题排查

14.1 常见问题解决方案

  1. HMR不工作：

    • 检查Vite配置是否正确
    • 确保没有浏览器缓存问题
    • 尝试禁用扩展程序

  2. TypeScript类型错误：

    • 确保正确配置了shims-vue.d.ts
    • 检查组件导入路径是否正确
    • 使用@ts-ignore临时忽略问题区域

  3. 样式不生效：

    • 检查scoped样式是否冲突
    • 确保预处理器已正确安装
    • 检查样式引入顺序

14.2 调试工具

  1. Vue DevTools 6：

    • 专门为Vue3设计的新版本
    • 支持组合式API检查
    • 支持Pinia状态调试

  2. 浏览器调试：

    • 使用debugger语句
    • 利用Source Map调试源码
    • 性能分析工具

  3. 网络请求调试：

    • 使用axios拦截器记录请求
    • 检查请求/响应头
    • 验证API文档

14.3 错误监控

  1. 全局错误处理：

    // main.ts app.config.errorHandler = (err, instance, info) => { console.error('Vue error:', err) // 上报错误 }

  2. Sentry集成：

    pnpm add @sentry/vue @sentry/tracing
    import * as Sentry from '@sentry/vue' import { Integrations } from '@sentry/tracing' Sentry.init({ app, dsn: 'your-dsn', integrations: [ new Integrations.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router) }) ], tracesSampleRate: 1.0 })

  3. 性能监控：

    import { getCLS, getFID, getLCP } from 'web-vitals' function sendToAnalytics(metric) { // 发送到监控系统 } getCLS(sendToAnalytics) getFID(sendToAnalytics) getLCP(sendToAnalytics)

15. 社区资源与学习路径

15.1 官方文档

  1. Vue3官方文档：

    • 中文：https://cn.vuejs.org/
    • 英文：https://vuejs.org/

  2. Vite文档：

    • https://vitejs.dev/

  3. Pinia文档：

    • https://pinia.vuejs.org/

15.2 优质教程

  1. Vue Mastery：

    • Vue3核心概念视频课程
    • 实战项目教程

  2. Vue School：

    • 高级Vue3课程
    • 认证培训

  3. 掘金小册：

    • 多本Vue3实战小册
    • 中文社区优质内容

15.3 开源项目参考

  1. Vue Element Admin：

    • https://github.com/PanJiaChen/vue-element-admin

  2. Naive UI Admin：

    • https://github.com/jekip/naive-ui-admin

  3. Vben Admin：

    • https://github.com/vbenjs/vue-vben-admin

15.4 持续学习建议

  1. 关注RFC：

    • Vue RFC仓库：https://github.com/vuejs/rfcs

  2. 参与社区：

    • Vue论坛：https://forum.vuejs.org/
    • GitHub Discussions

  3. 技术博客：

    • 官方博客
    • 核心团队成员博客
    • 社区优秀文章

16. 未来趋势与展望

16.1 Vue3生态系统发展

  1. Volar正式版：

    • 更强大的TypeScript支持
    • 更好的性能优化

  2. Pinia成为默认状态管理：

    • 更简单的API
    • 更好的开发体验

  3. Vite成为标配：

    • 更快的构建速度
    • 更丰富的插件生态

16.2 新特性预览

  1. Reactivity Transform：

    • 简化响应式代码
    • 编译时优化

  2. Suspense改进：

    • 更好的异步组件支持
    • 更灵活的使用方式

  3. Server Components：

    • 服务端组件支持
    • 混合渲染能力

16.3 个人实践建议

  1. 渐进式采用：

    • 从新项目开始使用Vue3
    • 逐步迁移现有项目

  2. 关注性能：

    • 持续优化打包体积
    • 关注运行时性能

  3. 拥抱TypeScript：

    • 全面采用TypeScript
    • 完善类型定义

  4. 参与贡献：

    • 报告问题
    • 提交PR
    • 编写文档

17. 总结与个人心得

经过多个Vue3项目的实战，我总结了以下几点关键经验：

  1. 组合式API是革命性的：

    • 逻辑复用变得前所未有的简单
    • 代码组织更加灵活
    • 需要转变思维方式，但值得投入

  2. TypeScript是必选项：

    • Vue3的设计充分考虑TS支持
    • 类型安全大幅提升开发效率
    • 项目越大，TS的价值越明显

  3. 工具链选择很重要：

    • Vite带来的开发体验提升巨大
    • 选择合适的UI库和工具集
    • 不要过度依赖魔法，理解底层原理

  4. 性能要从第一天开始关注：

    • 懒加载路由和组件
    • 合理使用状态管理
    • 关注打包体积

  5. 测试不是可选项：

    • 单元测试保障基础质量
    • E2E测试验证
编程学习 学习日记 实战经验
← 返回列表