Vue3脚手架怎么搭？从基础到进阶一次讲透

terry 10小时前阅读数 77 #SEO

Vue3脚手架到底指什么？有哪些工具可选？

很多刚接触Vue3的同学会问：“脚手架”听着抽象，到底是啥？简单说，脚手架是帮你快速生成项目基础结构、配置好开发环境的工具，不用自己手动建文件夹、配webpack，选好脚手架，一键就能得到能跑起来的Vue3项目。

Vue生态里最常用的脚手架工具分两类：Vue CLI 和 Vite。

先看Vue CLI——它是Vue官方早年推出的脚手架，底层基于webpack，优势是“开箱即用”的webpack生态：比如要兼容旧浏览器、需要复杂的代码分割/打包策略，或者团队里早就习惯webpack那套配置，选Vue CLI准没错，但缺点也明显：开发时要等webpack把代码全打包完才启动，项目大了后，启动和热更新都变慢。

再看Vite——这是Vue作者尤雨溪团队主导的新一代工具，开发阶段基于浏览器原生ES模块（ESM）加载代码，不用打包！所以冷启动速度超快，改一行代码热更新也是瞬间响应，适合新项目，尤其是追求开发效率的单页应用，但要注意，Vite的生产环境还是用Rollup打包，对旧浏览器的兼容（比如IE）支持不如Vue CLI+webpack灵活。

总结下来：如果是维护老项目、需要深度webpack定制，选Vue CLI；如果是新项目、想体验飞一样的开发速度，优先Vite。

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

想先用Vue CLI试试？这部分一步步教你操作，哪怕是新手也能跟上。

步骤1：安装Vue CLI

先确保电脑装了Node.js（推荐14+版本），打开终端执行：

npm install -g @vue/cli

装完后，输vue --version能看到版本号，说明装好了。

步骤2：创建项目

终端里选个文件夹，执行：

vue create my-vue3-project

接下来会让你选“预设”：选 Manually select features（手动配置），别选默认（默认是Vue2的配置，我们要Vue3）。

步骤3：选择项目特性

按空格勾选需要的功能：

Babel（转义ES6+语法，兼容旧浏览器）
TypeScript（可选，喜欢强类型就选）
Router（路由管理，选它！）
Vuex（状态管理，不过现在更推荐Pinia，先选着后续换也方便）
CSS Pre-processors（比如Sass/LESS，写样式更方便）
Linter / Formatter（代码规范检查，团队开发必选）

选完按回车，接下来选Vue版本，选 x（别选2.x）。

然后是一系列配置细节（比如路由是否用history模式、CSS预处理器选Sass还是LESS、ESLint规则选哪个），跟着自己需求选就行，小白直接选默认选项也没问题。

步骤4：等待项目创建 & 启动

配置选完后，CLI会自动装依赖，装完后进入项目文件夹：

cd my-vue3-project
npm run serve

浏览器打开http://localhost:8080，看到Vue的默认页面，说明项目跑起来了！

Vite搭Vue3项目更高效？实操流程看这里

前面说Vite开发速度快，实际体验到底多丝滑？这部分教你用Vite建项目，感受下“秒级启动”。

步骤1：创建Vite + Vue3项目

打开终端，执行（最新版Vite用create vite命令）：

npm create vite@latest my-vite-project -- --template vue

这里的--template vue表示用Vue的基础模板（JS版），如果想用TypeScript，把vue换成vue-ts。

步骤2：安装依赖 & 启动开发服务器

进入项目目录，装依赖：

cd my-vite-project
npm install

装完后启动：

npm run dev

此时终端会显示Local: http://127.0.0.1:5173/，打开浏览器，看到Vue的默认页面，开发服务器就跑起来了！修改src/App.vue，保存后浏览器瞬间更新，这就是Vite的热更新速度~

Vite配置文件怎么玩？

项目根目录下的vite.config.js是核心配置文件，比如想给项目配路径别名（比如用代替src），可以这么写：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

再比如配置接口代理（解决开发时跨域）：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://xxx.com', // 后端接口域名
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

Vite的配置很灵活，官方文档里还有更多玩法，比如优化打包、处理静态资源等，后续开发可以慢慢探索。

Vue3项目里怎么配置路由和状态管理？

项目跑起来后，得加路由跳转、状态共享这些核心功能，这部分分路由和状态管理两块讲。

路由配置：Vue Router 4.x

Vue3对应的路由是Vue Router 4版本，步骤如下：

安装依赖：
```
npm install vue-router@4
```

创建路由文件：
在src下新建router文件夹，里面建index.js：

import { createRouter, createWebHistory } from 'vue-router'
// 导入页面组件（比如Home和About）
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ]

const router = createRouter({ history: createWebHistory(), // history模式（URL里没有#） routes })

export default router


3. 在main.js里注册路由：  
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由配置
const app = createApp(App)
app.use(router) // 注入路由
app.mount('#app')

在App.vue里加路由出口和导航：

<template>
<div id="app">
 <!-- 导航链接 -->
 <router-link to="/">Home</router-link> | 
 <router-link to="/about">About</router-link>
 <!-- 路由出口，匹配的组件会渲染在这 -->
 <router-view></router-view>
</div>
</template>

这样就能实现页面跳转了~

状态管理：选Pinia更省心

Vuex是Vue2时代的状态管理方案，但Vue3更推荐用Pinia（可以理解为Vuex的“升级版”），它更轻量，API更简洁，还天生支持Vue3的组合式API。

安装Pinia：
```
npm install pinia
```
创建Store：
在src下新建store文件夹，建index.js：
```
import { createPinia } from 'pinia'
```

const store = createPinia() export default store


3. 在main.js里注册：  
```js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store' // 导入Pinia实例
const app = createApp(App)
app.use(store)
app.mount('#app')

定义第一个Store（比如计数器）：
在store里新建counter.js：
```
import { defineStore } from 'pinia'
```

// defineStore的第一个参数是唯一ID export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } })


5. 在组件里使用Store：  
比如在`Home.vue`里：  
```vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script setup>
import { useCounterStore } from '@/store/counter'
import { storeToRefs } from 'pinia' // 用来解构state且保持响应式
const counterStore = useCounterStore()
// 解构count，用storeToRefs让count保持响应式
const { count } = storeToRefs(counterStore)
const { increment } = counterStore // actions直接解构
</script>

这样点击按钮，count就会递增，状态也能在组件间共享~

团队开发时，Vue3项目要做哪些工程化配置？

自己写项目随便搞，但团队协作得有“规矩”：代码格式统一、提交信息规范、防止错误代码入库…这部分讲最实用的工程化配置。

代码规范：ESLint + Prettier 双剑合璧

目标是：团队里每个人写的代码，格式、语法都一样，避免“你用单引号我用双引号”的冲突。

安装依赖：

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

配置ESLint（.eslintrc.js）：

module.exports = {
root: true,
env: { node: true },
extends: [
 'plugin:vue/vue3-recommended', // Vue3的推荐规则
 '@vue/prettier' // 整合Prettier，避免ESLint和Prettier规则冲突
],
rules: {
 // 这里可以自定义规则，比如关闭console检查
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}

配置Prettier（prettier.config.js）：

module.exports = {
semi: false, // 不加分号
singleQuote: true, // 单引号
trailingComma: 'none', // 对象最后不加逗号
printWidth: 100 // 每行最多100字符
}

集成到VSCode：
装两个插件：ESLint 和 Prettier - Code formatter，然后在VSCode设置里，把“Format On Save”打开，这样保存文件时自动格式化+lint修复。

Git Hooks：提交代码前自动“找茬”

用husky和lint-staged，实现“提交代码前，自动检查暂存区的文件是否符合规范，不符合就不让提交”。

安装依赖：
```
npm install husky lint-staged -D
```
初始化husky：
```
npx husky install
```

添加pre-commit钩子：

npx husky add .husky/pre-commit "npx lint-staged"

配置lint-staged（package.json里加）：
```
"lint-staged": {
"*.{js,vue,ts}": "eslint --fix"
}
```
这样，每次git commit前，husky会触发pre-commit钩子，lint-staged会检查暂存区的js/vue/ts文件，自动修复能修的问题，修不好的会报错阻止提交。

提交信息规范：commitlint

团队里提交信息五花八门？用commitlint强制规范，比如提交信息必须是feat: 新增某某功能、fix: 修复某某bug这种格式。

安装依赖：

npm install @commitlint/cli @commitlint/config-conventional -D

配置commitlint（commitlint.config.js）：

module.exports = {
extends: ['@commitlint/config-conventional']
}

添加commit-msg钩子：
```
npx husky add .husky/commit-msg "npx commitlint --edit $1"
```
现在提交信息如果不符合规范（比如写成“改了点东西”），就会被拦截，必须改成feat: 新增登录功能这种格式才能提交。

生产环境部署，Vue3项目怎么优化打包？

开发时爽了，生产环境得让用户也爽：页面加载快、体积小、兼容性好…这部分分Vue CLI（webpack）和Vite两种情况讲优化。

Vue CLI + webpack 优化思路

分包加载：把第三方库（比如vue、element-plus）单独打包，避免每次改业务代码都重打包第三方库，在vue.config.js里配置：

module.exports = {
configureWebpack: {
 optimization: {
   splitChunks: {
     chunks: 'all',
     cacheGroups: {
       vendor: {
         name: 'vendors',
         test: /[\\/]node_modules[\\/]/,
         priority: 10,
         chunks: 'all'
       }
     }
   }
 }
}
}

CDN加速：把vue、vue-router等通过CDN引入，减少打包体积，在vue.config.js里配externals，然后在public/index.html里加CDN链接：

module.exports = {
configureWebpack: {
 externals: {
   vue: 'Vue',
   'vue-router': 'VueRouter'
 }
}
}

<!-- public/index.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.global.prod.js"></script>

图片压缩：用image-webpack-loader压缩图片，先装依赖：

npm install image-webpack-loader -D

然后在vue.config.js里配：

module.exports = {
chainWebpack: (config) => {
 config.module
   .rule('images')
   .use('image-webpack-loader')
   .loader('image-webpack-loader')
   .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } })
   .end()
}
}

Vite 优化思路

Vite生产环境用Rollup打包，优化更“轻量化”：

分包策略：在vite.config.js里配build.rollupOptions：

export default defineConfig({
build: {
 rollupOptions: {
   output: {
     manualChunks(id) {
       if (id.includes('node_modules')) {
         return id.toString().split('node_modules/')[1].split('/')[0].toString()
       }
     }
   }
 }
}
})

这样第三方库会按包名拆分，比如element-plus、vue各自一个包。

静态资源处理：Vite默认会把小于4kb的图片转base64，减少请求，如果要统一输出到assets/img文件夹，在vite.config.js里配：
```
export default defineConfig({
build: {
 assetsDir: 'assets/img'
}
})
```
Tree Shaking：Vite默认开启，会自动删除没用到的代码，如果用了第三方库（比如lodash），确保装的是ES模块版本（lodash-es），这样Tree Shaking更彻底。

脚手架搭建时遇到报错？这些坑怎么避？

新手最头疼“刚建项目就报错”，这里列几个高频问题和解决方法：

Node版本过低：
Vue CLI要求Node 14+，Vite推荐16+，打开终端输node -v，如果版本太低，去Node官网下最新稳定版安装。
端口被占用：
启动项目时，终端提示“Port 8080 is already in use”（Vue CLI）或“Port 5173 is already in use”（Vite），解决方法：

临时换端口：Vue CLI可以输npm run serve -- --port 8081；Vite可以改vite.config.js里的server.port。
永久改配置：Vue CLI在vue.config.js里加devServer: { port: 8081 }；Vite在vite.config.js里加server: { port: 5174 }。

依赖冲突/安装失败：
执行npm install时报错，试试

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue3 搭配 TypeScript 该怎么学？从基础到实战的问答手册