行为

Copy link

支持 #461

打开

vite + vue 教程

由李立奎在 17 天之前添加.

状态:

新建

优先级:

普通

指派给:

开始日期:

2026-01-01

计划完成日期:

% 完成:

预期时间:

#2:

描述

Vite + Vue 3 完整教程（C++ 开发者友好版）¶

这是一个从零开始构建现代 Vue 3 应用的完整指南，结合了官方推荐实践和企业级开发经验。

一、环境准备（类比：安装编译器）¶

1.1 前置条件¶

确保已安装 Node.js（推荐 LTS v18+），这就像安装 GCC/Clang 编译器。

node -v  # 应显示 v18.x.x 或更高
npm -v   # 应显示 9.x.x 或更高

C++ 类比：node 是运行时，像 java 或 .NET Runtime；npm 是包管理器，像 vcpkg 或 apt-get。

二、项目创建（类比：新建 CMake 项目）¶

2.1 方式一：推荐快速创建（一行命令）¶

# 创建项目（类似 cmake -B build）
npm create vite@latest my-vue-app -- --template vue-ts

# 进入项目目录
cd my-vue-app

# 安装依赖（类似 make install）
npm install

# 启动开发服务器（类似运行可执行文件）
npm run dev

访问 http://localhost:5173，看到欢迎页面即成功。

2.2 方式二：交互式创建（更灵活）¶

npm create vite@latest

按提示选择：

项目名称：my-vue-app
框架：选择 Vue
变体：选择 vue-ts（TypeScript）或 vue（JavaScript）

2.3 方式三：手动搭建（理解底层原理）¶

适合想深入理解构建机制的开发者，类似手写 Makefile

# 1. 初始化项目
mkdir my-vue-app && cd my-vue-app
npm init -y

# 2. 安装核心依赖
npm install vue@next                    # 安装 Vue 3 核心库
npm install -D vite @vitejs/plugin-vue  # 安装 Vite 和 Vue 插件

# 3. 创建基本文件结构
touch index.html vite.config.js src/main.js src/App.vue

关键配置文件：

vite.config.js - 类似 CMakeLists.txt

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],  // 启用 Vue 支持
  resolve: {
    alias: {
      '@': '/src'     // 路径别名，类似 -I/include/path
    }
  }
})

index.html - 入口模板

<!DOCTYPE html>
<html>
  <head>
    <title>Vite + Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js - 应用入口（类似 main() 函数）

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')  // 创建并挂载应用实例

三、项目结构解析（类比：源代码目录规范）¶

my-vue-app/
├── node_modules/       # 第三方依赖包（类似 /usr/lib）
├── public/             # 静态资源（直接复制，不经过构建）
├── src/
│   ├── assets/         # 静态资源（会被 Vite 处理，如图片、字体）
│   ├── components/     # 可复用组件（类似通用库）
│   ├── views/          # 页面级组件（类似主程序模块）
│   ├── router/         # 路由配置（导航系统）
│   ├── stores/         # 状态管理（全局数据）
│   ├── utils/          # 工具函数（类似 utils.h）
│   ├── App.vue         # 根组件（程序主框架）
│   └── main.js         # 入口文件（main 函数）
├── index.html          # HTML 模板
├── package.json        # 项目配置（类似 CMakeLists.txt）
├── vite.config.js      # Vite 配置（构建脚本）
└── jsconfig.json       # JavaScript 路径别名配置

C++ 类比：标准 C++ 项目有 src/、include/、lib/ 等约定目录，Vue 项目也有类似的最佳实践。

四、核心概念深度解析¶

4.1 响应式系统（Reactive System）¶

Vue 3 的响应式系统基于 Proxy，比 Vue 2 的 Object.defineProperty 更强大。

import { ref, reactive } from 'vue'

// ref - 包装基本类型（类似 std::optional<T>）
const count = ref(0)           // 创建一个响应式引用
console.log(count.value)       // 访问需要 .value
count.value++                  // 修改自动触发视图更新

// reactive - 包装对象（类似智能指针）
const state = reactive({
  user: { name: 'Alice', age: 25 },
  items: []
})
state.user.name = 'Bob'        // 直接访问属性，响应式

C++ 类比：ref 像 std::shared_ptr<T>，需要解引用；reactive 像 T* 自动解引用，但背后有"魔法"监听所有属性访问。

4.2 Composition API（组合式 API）¶

这是 Vue 3 的重大改进，类似 React Hooks，让逻辑复用更自然。

<script setup>
import { ref, computed, onMounted } from 'vue'

// 状态定义（类似成员变量）
const count = ref(0)
const message = ref('Hello')

// 计算属性（类似 getter）
const doubleCount = computed(() => count.value * 2)

// 方法定义（类似成员函数）
const increment = () => {
  count.value++
}

// 生命周期钩子（类似构造函数/析构函数）
onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

最佳实践：将相关逻辑提取为可组合函数（Composables），类似 C++ 的函数对象或策略模式。

// composables/useCounter.js
export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }  // 导出逻辑
}

// 在组件中使用
import { useCounter } from '@/composables/useCounter'
const { count, increment } = useCounter()

4.3 路由配置（Vue Router）¶

npm install vue-router@4

src/router/index.js - 路由配置表

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  { 
    path: '/', 
    name: 'Home',
    component: Home 
  },
  { 
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')  // 懒加载
  },
  {
    path: '/user/:id',          // 动态路由
    name: 'User',
    component: () => import('@/views/User.vue'),
    props: true                 // 将参数作为 props 传递
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 导航守卫（类似拦截器）
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

export default router

在 main.js 中挂载路由器：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

模板中使用：

<template>
  <router-link to="/">Home</router-link>  <!-- 声明式导航 -->
  <router-view></router-view>             <!-- 路由出口，组件渲染位置 -->
</template>

4.4 状态管理（Pinia）¶

Pinia 是 Vue 3 官方推荐的状态管理库，比 Vuex 更轻量、类型支持更好。

npm install pinia

src/stores/counter.js - 定义 Store

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // state
  const count = ref(0)
  
  // getters
  const doubleCount = computed(() => count.value * 2)
  
  // actions
  function increment() {
    count.value++
  }
  
  return { count, doubleCount, increment }
})

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

// 直接解构会失去响应性，需使用 storeToRefs
import { storeToRefs } from 'pinia'
const { count, doubleCount } = storeToRefs(counter)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="counter.increment">+1</button>
  </div>
</template>

C++ 类比：Store 类似全局单例类 + 观察者模式，任何组件都能访问共享状态，且状态变更会自动通知所有订阅者。

五、企业级项目实战架构¶

5.1 推荐目录结构（企业级）¶

src/
├── api/              # API 接口封装（类似网络请求层）
│   ├── user.js
│   └── product.js
├── assets/           # 静态资源
├── components/       # 通用组件（可复用 UI 组件）
│   ├── common/       # 基础组件（按钮、输入框等）
│   └── business/     # 业务组件
├── composables/      # 组合式函数（逻辑复用）
│   ├── useUser.js
│   └── useAuth.js
├── router/           # 路由配置
│   └── index.js
├── stores/           # 全局状态
│   ├── auth.js
│   └── app.js
├── utils/            # 工具函数（request.js、storage.js 等）
├── views/            # 页面组件（对应路由）
│   ├── Dashboard.vue
│   ├── Login.vue
│   └── NotFound.vue
├── App.vue           # 根组件
└── main.js           # 入口文件

这是 2025 年企业级应用的标准结构，支持 TypeScript 和模块化开发。

5.2 权限控制实现¶

// router/index.js
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { 
      requiresAuth: true,  // 需要认证
      roles: ['admin']      // 角色要求
    }
  }
]

// 全局前置守卫
router.beforeEach((to, from) => {
  const authStore = useAuthStore()
  
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    return '/login'  // 重定向到登录页
  }
  
  if (to.meta.roles && !to.meta.roles.includes(authStore.userRole)) {
    return '/403'  // 无权限页面
  }
})

六、性能优化实战¶

6.1 代码分割策略¶

在 vite.config.js 中配置手动分块，类似 C++ 的分离编译：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将大型库分离到独立 chunk
          echarts: ['echarts'],
          lodash: ['lodash-es'],
          ui: ['ant-design-vue']  // UI 框架
        }
      }
    }
  }
})

6.2 组件懒加载¶

<script setup>
// 动态导入组件，类似动态库加载
const HeavyComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)
</script>

<template>
  <Suspense>
    <template #default>
      <HeavyComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

6.3 虚拟滚动优化¶

大数据列表使用虚拟滚动，只渲染可视区域：

npm install vue-virtual-scroller

<template>
  <VirtualList
    :items="largeData"
    :item-size="50"
    v-slot="{ item }"
  >
    <div class="list-item">{{ item.name }}</div>
  </VirtualList>
</template>

七、开发工作流¶

7.1 常用命令¶

# 开发模式（热重载）
npm run dev

# 生产构建（优化打包）
npm run build

# 预览构建结果
npm run preview

# 运行单元测试
npm run test

# 代码检查
npm run lint

7.2 调试技巧¶

Vue DevTools 浏览器插件：查看组件树、状态、事件
Vite 的即时热更新：修改代码后浏览器立即反映，无需手动刷新
Source Map：在浏览器中直接调试原始源码，而非编译后代码

八、2025 年学习路线建议¶

8.1 阶段式学习路径¶

阶段 1：基础（1-2 周）

Vue 3 响应式原理（ref/reactive）
Composition API 基础
Vue Router 基础配置
完成 TodoList 实战项目

阶段 2：进阶（3-4 周）

Pinia 状态管理
前端权限控制系统
集成 Element Plus/Ant Design Vue
表单验证与数据持久化

阶段 3：项目实战（5-6 周）

开发完整 CRM/后台管理系统
实现动态路由 + 按钮级权限
性能优化（懒加载、虚拟滚动）
Docker 部署与 CI/CD

阶段 4：高级（持续）

Nuxt 3 全栈开发
Vue + WebAssembly 高性能场景
微前端架构
AI 辅助开发集成

8.2 必备资源¶

官方文档：Vue 3 文档、Vite 文档
GitHub 模板：vitesse（Antfu 的企业级模板）
视频教程：搜索"Vue 3 + Vite 2025 实战"

九、常见问题解答¶

Q1：Vue 3 和 React 如何选择？
A：Vue 3 更适合快速开发企业级中后台系统，学习曲线平缓；React 在复杂交互场景和生态灵活性上有优势。2025 年 Vue 3 的 Composition API 已完全解决大型项目结构问题。

Q2：Pinia 相比 Vuex 的优势？
A：Pinia 体积减少 40%，支持 TypeScript 原生类型推断，模块化结构更清晰，API 更简洁。

Q3：如何解决首屏加载慢？

使用 Vite 的预加载和代码分割
开启 HTTP/2 多路复用
按页面懒加载路由组件
使用 CDN 加速第三方库

Q4：TypeScript 是否是必须的？
A：不是必须，但强烈推荐。类似 C++ 中 auto vs 显式类型，TypeScript 提供类型安全，在大型项目中能避免大量运行时错误。

总结：Vite + Vue 3 的组合提供了极速开发体验 + 企业级架构能力，是 2025 年构建现代 Web 应用的首选方案。从创建项目到部署上线，整个流程已非常成熟，官方工具链覆盖完整，社区生态丰富。

没有任何数据可供显示

行为