Vue初始化脚手架

一、什么是脚手架（Scaffolding）？

脚手架 是指通过工具自动生成项目基础结构和配置文件的过程。

在 Vue 中，脚手架工具会：

创建项目目录
生成 package.json
安装 Vue 核心库
集成路由（Vue Router）、状态管理（Pinia/Vuex）
配置构建工具（Webpack/Vite）
提供开发服务器（dev server）

常见的 Vue 脚手架工具：

Vue CLI（基于 Webpack）
Vite（新一代构建工具，推荐）

二、方式一：使用 Vue CLI 创建项目（Vue 2 / Vue 3）

Vue CLI 是 Vue 官方推出的标准化开发工具，功能强大，配置灵活。

1. 安装 Vue CLI（全局）

bash 复制代码

npm install -g @vue/cli
# 或
yarn global add @vue/cli

✅ 检查版本：vue --version

2. 创建项目

bash 复制代码

vue create my-vue-project

执行后会进入交互式配置界面：

复制代码

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
❯ Manually select features

推荐选择：Manually select features

然后按需选择：

(*) Choose Vue version → 选择 Vue 2 或 Vue 3
(*) Babel → ES6+ 转译
(*) TypeScript → 支持 TS
(*) Router → Vue Router
(*) Pinia → 状态管理（推荐替代 Vuex）
(*) Linter / Formatter → 代码规范（ESLint + Prettier）

✅ 建议：Vue 3 + TypeScript + Router + Pinia + ESLint

3. 项目结构解析

bash 复制代码

my-vue-project/
├── public/            # 静态资源（不参与构建）
├── src/
│   ├── assets/        # 静态文件（图片、字体等）
│   ├── components/    # 公共组件
│   ├── views/         # 页面组件
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理（Pinia）
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── babel.config.js    # Babel 配置
├── vue.config.js      # Vue CLI 配置（可选）
└── package.json

✅ vue.config.js 可用于自定义 Webpack 配置。

4. 启动项目

bash 复制代码

cd my-vue-project
npm run serve

访问 http://localhost:8080 查看效果。

三、方式二：使用 Vite 创建项目（推荐 ✅）

Vite 是由 Vue 作者尤雨溪开发的新一代前端构建工具，基于原生 ES 模块（ESM），启动速度极快，是当前 Vue 项目的首选。

1. 使用 Vite 快速初始化

无需全局安装，直接使用 create-vite：

bash 复制代码

npm create vite@latest

或

bash 复制代码

yarn create vite

2. 交互式配置

复制代码

Project name: › my-vue-app
Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
    svelte
    others

选择 vue，然后选择变体：

复制代码

Select a variant: › - Use arrow-keys. Return to submit.
    vue
    vue-ts

vue：JavaScript 版本
vue-ts：TypeScript 版本（推荐）

3. 安装依赖并启动

bash 复制代码

cd my-vue-app
npm install
npm run dev

访问 http://localhost:5173，Vite 启动速度远超 Vue CLI。

4. Vite 项目结构

bash 复制代码

my-vue-app/
├── public/            # 静态资源
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   └── main.ts        # 入口（TS）
├── env.d.ts           # TypeScript 全局声明
├── tsconfig.json      # TS 配置
├── vite.config.ts     # Vite 配置文件
└── package.json

✅ vite.config.ts 是 Vite 的核心配置文件，支持插件、代理、别名等。

四、Vue CLI vs Vite 对比

特性	Vue CLI（Webpack）	Vite（推荐）
构建速度	慢（依赖打包）	⚡ 极快（ESM + 懒加载）
冷启动	几秒到几十秒	<1 秒
HMR 热更新	快	极快
配置复杂度	高（Webpack）	低（Vite 配置简洁）
TypeScript 支持	需配置	原生支持
生态插件	丰富	快速增长
适用场景	老项目维护	新项目首选

✅ 结论：新项目强烈推荐使用 Vite。

五、初始化后的优化配置

1. 配置路径别名（@）

在 vite.config.ts 中添加：

TypeScript 复制代码

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

在代码中使用：

javascript 复制代码

import HelloWorld from '@/components/HelloWorld.vue'

2. 配置 ESLint + Prettier

bash 复制代码

npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-typescript @vue/eslint-config-prettier

创建 .eslintrc.cjs：

javascript 复制代码

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ],
  rules: {
    'vue/multi-word-component-names': 'off'
  }
}

✅ 统一团队代码风格。

3. 配置开发服务器代理

在 vite.config.ts 中：

TypeScript 复制代码

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

✅ 解决开发环境跨域问题。

六、常见问题与解决方案

❓ Vite 项目如何添加 Vue Router 或 Pinia？

bash 复制代码

npm install vue-router@4 pinia

然后手动创建 src/router/index.ts 和 src/store/index.ts。

✅ Vite 脚手架默认不集成，需手动安装。

❓ 如何升级 Vue CLI 项目到 Vite？

可以使用 @vitejs/plugin-vue 迁移，但建议新项目直接使用 Vite。

❓ 是否还需要 Webpack？

Webpack 仍在维护，适合复杂构建需求，但 Vite 已成为 Vue 生态主流。

七、总结：Vue 项目初始化最佳实践

步骤	推荐方案
1. 选择工具	✅ Vite（新项目） / Vue CLI（老项目）
2. 选择版本	✅ Vue 3 + TypeScript
3. 状态管理	✅ Pinia（替代 Vuex）
4. 路由	✅ Vue Router 4
5. 代码规范	✅ ESLint + Prettier
6. 路径别名	✅ 配置 `@` 指向 `src`
7. 代理配置	✅ `vite.config.ts` 中设置

📌 核心原则 ：
新项目用 Vite，旧项目逐步迁移，工具服务于开发效率。

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！