创建Vue3项目前，得准备哪些工具？

想学Vue3却卡在项目创建？想从0到1搭建属于自己的Vue3项目，但对着命令行犯懵？工具选Vue CLI还是Vite？项目建好后目录咋看？代码规范、路由状态管理咋集成？别慌，这篇从基础到实战的指南，把Vue3项目创建的坑和技巧全拆明白，新手也能跟着一步步搞懂！

先解决“工欲善其事，必先利其器”的问题，创建Vue3项目前，得把基础工具备好，不然命令行一堆报错，心态直接崩。

为啥必须装Node.js？

Vue3项目依赖Node.js运行环境，不管用Vue CLI还是Vite，都得靠Node.js里的npm、yarn或pnpm来装依赖、跑脚本，建议装LTS长期支持版（比如现在的v20+），稳定性高，装完后打开终端，输入node -v和npm -v，能看到版本号就说明装对了。

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

这仨都是Node.js的包管理器，但各有特点：

• npm：Node.js自带，不用额外装，适合新手入门，但下载依赖时容易重复，体积大。
• yarn：早年为了解决npm的痛点出现，锁版本更稳定（有yarn.lock），现在生态也成熟。
• pnpm：近几年火起来的“超高效”管理器，用硬链接和符号链接减少重复下载，速度快、体积小，还能严格控制依赖版本。

新手可以先用npm试试,想追求效率就换pnpm（装完Node.js后，用npm install -g pnpm装）。

Vue CLI和Vite该怎么选？

这俩是创建Vue3项目的核心工具,但适用场景不同：

• Vue CLI：基于Webpack，适合需要Webpack生态的项目（比如老项目迁移、需要复杂配置），优点是生态成熟，插件多；缺点是启动和热更新慢，尤其是大项目。
• Vite：基于ES Module和Rollup，主打“快”！冷启动秒开，改代码热更新瞬间响应，配置还特简单，适合新项目，尤其是追求开发体验的前端同学。

如果是练手或做新项目,优先选Vite；如果团队里有Webpack老项目要升级Vue3，Vue CLI更稳。

用Vue CLI创建Vue3项目，步骤是怎样的？

如果选Vue CLI，跟着这几步走，别漏细节：

先装Vue CLI（没装过的话）

打开终端,输入npm install -g @vue/cli，装完后，输入vue --version，能看到版本号（得是4.x及以上，才支持Vue3）。

创建项目：选配置、选Vue版本

输入vue create my-vue3-app（my-vue3-app是项目名，自己改），接下来选配置：

• 选Manually select features（手动选功能），回车。
• 然后挑需要的功能：比如Babel（转ES6+语法）、TypeScript（可选，强类型爱好者选）、Router（路由）、Vuex（状态管理，不过现在更推荐Pinia）、CSS Pre-processors（比如Less/Sass），用空格选中，回车。
• 选Vue版本：选x（别选2.x，不然白搞）。
• 后面的选项（比如Babel和ESLint配置文件放哪、是否保存为预设），新手选默认项就行，回车到底。

启动项目，看效果

进入项目目录：cd my-vue3-app，然后跑npm run serve，终端会输出Local: http://localhost:8080/，打开浏览器访问，就能看到Vue3的默认页面啦！

重点：Vue3和Vue2的项目差异

打开src/main.js，Vue3是这么写的：

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

和Vue2的new Vue({...}).$mount('#app')不一样。createApp是Vue3的新API，全局配置（比如use、mixin）都要挂在app实例上，更灵活也更隔离。

用Vite创建Vue3项目，优势和操作步骤是啥？

Vite现在是Vue3项目的“当红炸子鸡”，这部分得重点讲透优势和实操：

Vite到底好在哪？

• 启动快到飞起：不用像Webpack那样先打包整个项目，直接启动开发服务器，冷启动秒开。
• 热更新丝滑：改一行代码，页面瞬间更新，不用等半天（尤其是大组件，体验差距更明显）。
• 配置超简单：配置文件vite.config.js比Webpack简洁太多，新手也能快速改代理、别名这些。

用Vite创建项目的步骤

现在Vite支持“一键初始化”，命令记好：

方式1：npm

npm create vite@latest my-vite-vue3 -- --template vue
（my-vite-vue3是项目名，--template vue表示用Vue的基础模板）

方式2：yarn

yarn create vite my-vite-vue3 --template vue

方式3：pnpm

pnpm create vite my-vite-vue3 -- --template vue

选完工具和项目名后,终端会让你选框架（选Vue）和变体（比如选vue是JS版，vue-ts是TypeScript版），选好后，进入项目目录装依赖：cd my-vite-vue3 && npm install（或yarn/pnpm）。

然后启动开发服务器：npm run dev，终端会输出Local: http://localhost:5173/（Vite默认端口5173，和Vue CLI的8080不一样），打开浏览器，就能看到Vite+Vue3的初始页面～

Vite的配置文件咋玩？

打开vite.config.js，基础配置长这样：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  // 可以加别名、代理、CSS配置等
  resolve: {
    alias: {
      '@': '/src' // 配置@指向src目录，和Vue CLI的alias一样
    }
  },
  server: {
    proxy: {
      '/api': 'http://localhost:3000' // 代理后端API，解决跨域
    }
  }
})

想改端口、代理、别名，直接在这文件里加配置，比Webpack的vue.config.js简单太多！

Vue3项目创建后，目录里的文件都是干啥的？

项目建好后,一堆文件夹和文件，新手容易看晕，这里拆最关键的几个目录和文件：

src目录：项目核心代码区

• main.js：项目入口文件！Vue3用createApp(App).mount('#app')创建根实例，所有全局配置（比如use路由、状态管理）都在这加。
• App.vue：根组件！整个项目的“大容器”，里面能嵌套其他组件，Vue3的App.vue可以用<script setup>语法糖，写代码更简洁。
• components：放公共组件（比如按钮、弹窗），每个组件是.vue文件，包含<template>（结构）、<script>（逻辑）、<style>（样式）。
• views（如果装了Router）：放页面级组件，比如HomeView.vue、AboutView.vue，和Router配置对应。
• router（如果装了Router）：index.js里用createRouter配路由规则，决定哪个路径显示哪个组件。
• store（如果用Vuex或Pinia）：状态管理中心，Vuex 4的index.js用createStore，Pinia则是createPinia+defineStore，后面详细讲。

public目录：放“不动”的静态资源

比如favicon.ico（网页小图标）、robots.txt（搜索引擎配置），这里的文件不会被打包工具处理，直接拷贝到dist目录，如果要引图片，用/xxx.png（根路径）的方式。

package.json：项目“身份证”

记录项目依赖（dependencies是生产依赖，devDependencies是开发依赖）和脚本（scripts里的dev、build就是启动和打包命令），比如Vue CLI的npm run serve对应vue-cli-service serve，Vite的npm run dev对应vite。

想让团队代码风格统一，怎么配置ESLint和Prettier？

团队协作时,代码风格乱成粥？ESLint管语法错误，Prettier管代码格式，配好这俩，代码自动“整整齐齐”。

装依赖（一次性装全）

打开终端,进入项目目录，装这些包：

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

解释下：

• eslint：JS代码检查工具。
• prettier：代码格式化工具。
• eslint-plugin-vue：Vue的ESLint插件，能检查.vue文件的语法。
• @vue/eslint-config-prettier：让ESLint和Prettier不打架（比如Prettier负责格式化，ESLint负责语法，冲突的规则以Prettier为准）。
• @vue/eslint-config-airbnb：Airbnb的代码规范（业界流行的严格规范，也可以选standard等）。

配ESLint规则：.eslintrc.js

在项目根目录新建.eslintrc.js，写：

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended', // Vue3的推荐规则
    '@vue/airbnb', // Airbnb规范
    '@vue/prettier' // 让ESLint和Prettier协同
  ],
  rules: {
    // 自己定制规则，比如开发时允许console.log
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off' // 关闭组件名必须多单词（新手写单单词组件时方便）
  }
}

配Prettier规则：.prettierrc.json

新建.prettierrc.json，配置格式偏好：

{
  "semi": true, // 句尾加分号
  "singleQuote": true, // 用单引号
  "trailingComma": "es6", // 对象/数组最后一个元素加逗号
  "printWidth": 100, // 一行最多100字符
  "tabWidth": 2, // 缩进2个空格
  "arrowParens": "always" // 箭头函数参数必加括号
}

VSCode里自动格式化

装两个插件：ESLint和Prettier - Code formatter，然后打开VSCode设置，搜“format on save”，勾上“Editor: Format On Save”，这样每次保存文件，ESLint和Prettier会自动帮你修语法、调格式，再也不用手动对齐代码啦～

Vue3项目里怎么快速加路由和状态管理？

路由（Vue Router）管页面跳转，状态管理（Pinia或Vuex）管数据共享，Vue3推荐用Vue Router 4和Pinia，这部分讲实操：

集成Vue Router 4（路由）

步骤1：装依赖

npm install vue-router@4（一定是@4版本，对应Vue3）

步骤2：配路由规则（router/index.js）

新建src/router/index.js，写：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' // 导入页面组件
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // history模式（URL好看，没有#）
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue') // 懒加载，访问时再加载组件
    }
  ]
})
export default router

步骤3：在main.js里用路由

打开src/main.js，引入并use：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由配置
createApp(App)
  .use(router) // 挂载路由
  .mount('#app')

步骤4：在App.vue里加路由出口

打开src/App.vue，在模板里加<router-view>（路由组件的显示位置）和<router-link>（跳转链接）：

<template>
  <div id="app">
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">lt;/router-link>
    <router-view></router-view> <!-- 路由组件显示在这 -->
  </div>
</template>

对比Vue Router 3：Vue3用createRouter和createWebHistory，而Vue2是new VueRouter({ mode: 'history' })，配置更简洁了～

集成Pinia（状态管理，替代Vuex）

Vuex还能用,但Pinia更轻量、API更简单，Vue官方推荐。

步骤1：装依赖

npm install pinia

步骤2：创建Store（src/store/index.js）

import { createPinia } from 'pinia'
const store = createPinia()
export default store

步骤3：在main.js里用Store

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 引入Pinia
createApp(App)
  .use(router)
  .use(store) // 挂载Pinia
  .mount('#app')

步骤4：写第一个Store模块（比如counter.js）

新建src/store/counter.js，用defineStore定义状态：

import { defineStore } from 'pinia'
// 第一个参数是Store的唯一ID
export const useCounterStore = defineStore('counter', {
  state: () => ({ 
    count: 0 
  }), // 状态（类似Vuex的state）
  actions: { 
    increment() { 
      this.count++ 
    } 
  } // 方法（类似Vuex的actions，Pinia没有mutations，直接改state）
})

步骤5：在组件里用Store

比如在HomeView.vue里：

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script setup>
import { useCounterStore } from '../store/counter'
import { storeToRefs } from 'pinia' // 把Store里的状态转成响应式ref
const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore) // 解构count，保持响应式
const { increment } = counterStore // 解构方法
</script>

Pinia的优势：不用写mutations，直接在actions里改state；支持组合式API，写复杂逻辑更灵活；对TypeScript友好到飞起～

从0到1开发个简单功能，Vue3项目实战咋做？

光说不练假把式,做个“Todo列表”功能，涵盖组件、响应式、交互，新手能跟着复刻：

需求：Todo列表，能添加、删除、标记完成

步骤1：创建TodoList组件（src/components/TodoList.vue）

<template>
  <div class="todo-container">
    <h2>我的待办清单</h2>
    <!-- 输入新任务，按回车或点按钮添加 -->
    <input 
      v-model="newTodo" 
      placeholder="输入新任务" 
      @keyup.enter="addTodo" 
    />
    <button @click="addTodo">添加</button>
    <!-- 渲染Todo列表 -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <!-- 标记完成 -->
        <input type="checkbox" v-model="todo.completed" />
        <!-- 任务文本，完成时加删除线 -->
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <!-- 删除按钮 -->
        <button @click="