Vue3 怎么新建项目？从环境准备到工程化实践一次讲透

不少刚接触前端的同学,想试试Vue3却卡在「新建项目」这一步；也有经验的开发者想换更高效的工具链，却纠结选Vite还是Vue CLI，其实Vue3新建项目的门道不少，选对工具、理清步骤，能让后续开发顺很多，这篇文章用问答形式，把环境准备、主流创建方式、项目结构梳理这些关键问题一个个拆解，帮你从0到1搭好Vue3项目。

新建Vue3项目前，得先搞定哪些环境？

前端项目不像纯HTML/CSS那样直接开写，Vue3项目依赖Node.js、包管理器这些工具，就像做饭前得先把锅碗瓢盆备齐。

Node.js：项目的“发动机”

Vue3项目里的构建工具（比如Vite）、包管理（npm/yarn）都得靠Node.js运行。建议装Node.js 16及以上版本——因为Vite对Node版本有要求，版本太低可能启动报错，安装后打开命令行，输入node -v能看到版本号，验证是否装对。

包管理器：选npm、yarn还是pnpm？

Node.js自带npm，但很多人会换更顺手的工具：

• npm：最基础，不用额外装，但下载依赖时体积大、速度慢；
• yarn：早期为解决npm痛点出现，现在生态也成熟；
• pnpm：近几年火起来的，用“软链接”优化存储，体积小、速度快，命令和npm差不多。

想换pnpm的话,命令行输npm install -g pnpm，装完用pnpm -v验证，后续创建项目时，用pnpm代替npm就行（比如pnpm create vite@latest）。

编辑器：VSCode + Volar插件

写Vue3代码,VSCode是主流选择，装完VSCode后，一定要装Volar插件——它是Vue官方的语法支持工具，对Vue3的单文件组件（.vue文件）、TypeScript语法支持特别好，代码提示、错误检查都很智能，如果之前装过Vue 2的插件（比如Vetur），记得禁用，避免冲突。

Vue3新建项目有哪些主流工具？各自适合啥场景？

选对工具能少走弯路！现在新建Vue3项目，常用的有Vite、Vue CLI、Nuxt3，它们定位不同：

Vite：追求“快”就选它

Vite是Vue作者尤雨溪主导开发的构建工具,基于浏览器的ESModule加载，冷启动、热更新都比传统工具快很多，适合：

• 新项目从零开始,想体验极致开发效率；
• 团队技术栈偏新,愿意接受新工具链；
• 项目不需要复杂的webpack配置（比如老项目迁移）。

缺点？如果团队里全是webpack老玩家，初期可能需要适应Vite的配置逻辑。

Vue CLI：webpack生态的“老大哥”

Vue CLI是webpack-based的脚手架，现在官方更推Vite，但它胜在生态成熟：各种webpack loader、插件随便挑，适合：

• 维护老Vue项目（比如从Vue 2升级到Vue 3）；
• 项目需要复杂的webpack定制（比如多页面应用、特殊资源处理）；
• 团队里webpack熟手多,不想换工具链。

注意：Vue CLI要装4.x及以上版本才能支持Vue3，命令行输vue --version能看版本。

Nuxt3：服务端渲染场景的“利器”

如果项目需要SEO友好（比如官网、博客），或者首屏加载速度快（用户没等前端JS加载完，服务端就把页面渲染好了），Nuxt3是首选，它基于Vue3，支持：

• 服务端渲染（SSR）：每次请求都由服务端生成页面；
• 静态站点生成（SSG）：打包时生成静态HTML，部署到静态托管平台；
• 自动路由（pages目录约定式路由）、服务端接口（server目录写后端逻辑）。

适合做需要SEO的网站、中大型应用的服务端渲染场景。

用Vite创建Vue3项目，具体步骤是啥？

现在Vite是Vue3新建项目的“默认推荐”，步骤很清爽：

命令行初始化项目

打开命令行,输入创建命令（以npm为例，yarn/pnpm同理）：

npm create vite@latest 你的项目名 -- --template vue

解释下：create vite@latest是官方脚手架，--template vue指定用Vue模板，执行后会让你选框架（Framework）和变体（Variant）：

• 框架选Vue；
• 变体选JavaScript或TypeScript（想体验TypeScript就选后者）。

选完后,命令行会提示你进入项目目录：

cd 你的项目名

安装依赖

进入目录后,装项目需要的依赖：

npm install

（用pnpm的话是pnpm install，yarn是yarn）

项目结构快速扫盲

装完依赖后,项目目录长这样（以TypeScript变体为例）：

your-project/
├─ node_modules/   # 依赖包，自动生成，别手动改
├─ package.json    # 项目依赖、脚本命令配置
├─ vite.config.ts  # Vite的配置文件（JS变体是vite.config.js）
├─ index.html      # 入口HTML（Vite的特殊点：入口不是JS，是HTML）
└─ src/            # 源码目录，开发核心
   ├─ assets/      # 静态资源（图片、样式等）
   ├─ components/  # 可复用组件
   ├─ App.vue      # 根组件，所有页面的“容器”
   └─ main.ts      # 项目入口，把App.vue挂载到页面

重点看src/main.ts，这是项目启动的起点：

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

作用是创建Vue应用实例,把根组件App.vue挂载到HTML里的#app节点（看index.html里的<div id="app"></div>）。

启动项目，体验热更新

输入启动命令：

npm run dev

命令行会输出本地地址（一般是http://127.0.0.1:5173/），打开浏览器就能看到Vue的默认欢迎页。

想体验热更新（HMR）？打开src/App.vue，把<h1>Vite + Vue</h1>改成<h1>我的第一个Vite+Vue3项目</h1>，保存后页面会自动刷新，不用手动刷新浏览器——这就是Vite的快！

还想继续用Vue CLI？Vue3项目咋基于Vue CLI创建？

如果团队还依赖webpack生态,或者想兼容老项目，Vue CLI依然能打：

安装/升级Vue CLI

先确保Vue CLI版本≥4.x，命令行输：

npm install -g @vue/cli

装完后验证版本：vue --version，如果低于4.x，用npm update -g @vue/cli升级。

命令行创建项目

输入：

vue create 你的项目名

执行后会让你选预设（preset）：

• 选Manually select features（手动选择特性），因为要自定义Vue3、Router、Vuex这些配置；
• 然后勾选项：Babel（转译ES6+语法）、TypeScript（可选）、Router（路由）、Vuex（状态管理）、CSS Pre-processors（CSS预处理器，比如Less/Sass）等；
• 关键一步：选择Vue版本时，选x；
• 后续配置（比如Router的history模式、ESLint规则）按需选，最后保存预设（可选，下次创建能复用）。

项目结构与Vite的差异

创建好的Vue CLI项目结构：

your-project/
├─ node_modules/
├─ package.json
├─ vue.config.js   # Vue CLI的配置文件（代替webpack.config.js）
├─ public/         # 静态资源（编译时不会被处理，直接拷贝）
└─ src/
   ├─ assets/
   ├─ components/
   ├─ router/      # 路由配置（Vue CLI需手动创建，Vite默认没有，需自己加）
   ├─ store/       # Vuex状态管理（同理，需手动配置）
   ├─ App.vue
   └─ main.js      # 入口文件

和Vite的区别：

• Vue CLI的入口是src/main.js，且需要手动配置Router、Vuex（Vite项目默认没有，得自己装依赖、写配置）；
• vue.config.js是webpack配置的“包装器”，想改webpack配置得在这里写；
• public目录里的资源不会被构建工具处理，适合放favicon、第三方脚本。

启动项目

进入目录,输：

npm run serve

默认启动在http://localhost:8080/，打开后能看到Vue CLI的默认页面。

想做服务端渲染？Nuxt3新建Vue3项目咋操作？

如果项目需要SEO、首屏快，Nuxt3是Vue3生态的SSR方案：

Nuxt3是干啥的？

简单说,Nuxt3把Vue3和服务端渲染、静态站点生成“打包”成一套框架：

• 写页面不用手动配路由（pages目录下的.vue文件自动生成路由）；
• 服务端逻辑直接写在server目录（不用额外搭Node服务）；
• 支持SSR（每次请求服务端生成页面）和SSG（打包时生成静态HTML）。

适合做博客、企业官网、需要SEO的Web应用。

用nuxi工具初始化项目

Nuxt3提供了nuxi命令行工具,先全局安装：

npm install -g nuxi

然后创建项目：

nuxi init 你的项目名

执行后进入项目目录,装依赖：

cd 你的项目名
npm install

特色目录解析

Nuxt3的项目结构和纯Vue3项目差异大,核心目录：

your-project/
├─ node_modules/
├─ package.json
├─ nuxt.config.ts  # Nuxt3的配置中心
├─ pages/          # 页面目录，自动生成路由（约定式路由）
│  └─ index.vue    # 首页，对应根路径/
├─ server/         # 服务端逻辑目录（接口、中间件等）
│  └─ api/         # 后端接口，比如api/hello.ts对应/hello接口
├─ composables/    # 组合式函数，全局可复用的逻辑
└─ app.vue         # 根组件，类似Vue3的App.vue

举个例子：在pages/about.vue里写一个页面组件，访问/about时会自动渲染这个组件，不用手动配路由；在server/api/hello.ts里写：

export default defineEventHandler(() => {
  return { message: 'Hello from Nuxt3 server!' }
})

启动后访问/api/hello，就能拿到这个接口的响应。

启动与部署初步

启动Nuxt3项目：

npm run dev

默认地址是http://localhost:3000/，打开后能看到Nuxt3的默认页面。

部署的话,如果是SSG（静态站点生成），执行npm run generate，会在.output/public生成静态HTML，直接丢到Netlify、Vercel这些静态托管平台就行；如果是SSR，需要Node服务环境，部署到服务器或云平台。

新建项目后，怎么快速理解目录结构？哪些文件不能乱改？

刚建好的项目目录里,文件一堆，得知道哪些能改、哪些碰不得：

通用基础目录：碰之前先想清楚

• node_modules/：所有依赖包都在这，自动生成，手动改必出问题！装依赖、删依赖都用包管理器（npm/yarn/pnpm），别自己删文件；
• package.json：项目的“说明书”，记录依赖版本、脚本命令（比如dev、build），想加依赖，用npm install 包名，别手动改这个文件，容易版本冲突；
• .gitignore：告诉Git哪些文件不用提交（比如node_modules、.env），团队协作时，这个文件很重要，别把敏感信息或大文件提交到仓库。

src核心目录：开发的“主战场”

• src/main.js/ts：项目入口，负责创建Vue应用实例，把根组件App.vue挂载到页面，想加全局配置（比如路由、状态管理），得在这里引入；
• src/App.vue：根组件，所有页面组件都嵌套在这，可以在这里写全局样式、布局（比如导航栏、页脚）；
• src/components/：放可复用的小组件（比如按钮、弹窗），按功能分类建文件夹（比如ui/Button.vue、form/Input.vue）；
• src/assets/：放静态资源（图片、CSS/LESS/SASS文件），比如图片用import img from './assets/logo.png'引入，样式文件在组件里用import './assets/main.css'导入。

配置文件：改之前查文档

• vite.config.js/ts（Vite项目）：Vite的配置中心，比如改开发端口（server.port）、配接口代理（server.proxy）、引入插件（比如vite-plugin-vue-layouts）都在这里；
• vue.config.js（Vue CLI项目）：Vue CLI的配置文件，本质是webpack配置的封装，想改webpack的loader、插件，得用chainWebpack或configureWebpack；
• nuxt.config.ts（Nuxt3项目）：Nuxt3的配置文件，比如设置路由规则、配置SSG、引入模块（比如Tailwind CSS）都在这里。

新建项目后，怎么加ESLint、Prettier这些代码规范工具？

团队开发最怕代码风格“百花齐放”，所以新建项目后，赶紧把代码规范配上：

安装依赖

以Vite + TypeScript项目为例，装这些包：

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

解释：

• eslint：代码检查工具；
• eslint-plugin-vue：Vue的ESLint规则；
• @typescript-eslint/系列：TypeScript的ESLint支持；
• prettier：代码格式化工具；
• eslint-config-prettier：关闭ESLint和Prettier冲突的规则；
• eslint-plugin-prettier：把Prettier当作ESLint规则运行。

配置文件编写

在项目根目录建这些文件：

• .eslintrc.cjs（ESLint配置）：

  module.exports = {
  root: true,
  env: { browser: true, es2021: true },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier' // 最后引入，覆盖冲突规则
  ],
  parser: 'vue-eslint-parser',
  parserOptions: { parser: '@typescript-eslint/parser', ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 自定义规则，比如关闭console检查
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off' // 关闭组件名必须多单词的规则（新手友好）
  }
  }

• .prettierrc.json（Prettier配置）：

  {
  "semi": false,        // 语句末尾不加分号
  "singleQuote": true,  // 用单引号
  "trailingComma": "all"// 对象/数组最后一个元素加逗号
  }

• .editorconfig（编辑器统一配置）：

  root = true

[*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true

#### 3. Git Hooks：提交前自动检查  
用Husky和lint-staged，让每次git commit前自动格式化、检查代码：  
- 装依赖：  
```bash
npm install husky lint-staged -D

• 初始化Husky：

  npx husky install

• 新建pre-commit钩子：

  npx husky add .hus