Vue基础教程（152）精通Vue CLI和Vite：Vue CLI与Vite：从“老将挂帅”到“闪电新星”，教你用最潮姿势玩转Vue脚手架！

最新推荐文章于 2025-10-03 15:36:35 发布

原创最新推荐文章于 2025-10-03 15:36:35 发布 · 316 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

朋友们！今天咱们来聊聊Vue生态里两个超级重要的工具——Vue CLI和Vite。如果你正在学Vue，或者已经在用Vue做项目，那你肯定对它们不陌生。但你真的了解它们吗？知道什么时候该用谁吗？别急，跟着我一起，咱们用最接地气的方式，把这两个工具掰开揉碎了讲清楚！

先来认识一下这两位“大佬”

Vue CLI，咱们可以叫它“老将”。它就像你家楼下的那家老字号餐馆，开了十几年，菜品稳定，服务周到。Vue CLI是Vue官方最早推出的脚手架工具，基于Webpack，功能那叫一个全面。从项目创建、热重载，到代码压缩、环境配置，它全给你包圆了。如果你做过Vue 2项目，大概率跟它打过交道。

那Vite呢？它是新时代的“闪电侠”。由Vue作者尤雨溪亲自打造，主打的就是一个“快”字。我第一次用Vite的时候，那启动速度差点让我以为电脑卡顿了——因为实在太快了，反而有点不习惯！Vite利用浏览器原生ES模块导入，开发环境下根本不需要打包，直接秒开项目。

你可能会问：“都有了Vite，还要Vue CLI干啥？”问得好！这就好比有了高铁，绿皮火车也没淘汰啊。它们各有各的适用场景，接下来咱们就深入聊聊。

Vue CLI：稳如老狗的“全能选手”

先说说Vue CLI。它的核心优势就俩字：成熟。

想象一下这个场景：你要给公司做一个大型后台管理系统，需要兼容IE11，需要各种复杂的Webpack配置，还要集成一堆第三方插件。这时候，Vue CLI就是你的不二之选。

为什么？因为它背后的Webpack生态太完善了。几乎你遇到的任何问题，社区里都有现成的解决方案。那种“被全世界开发者托着走”的感觉，真的很踏实。

来，咱们实际创建一个Vue CLI项目感受一下：

# 首先，确保你安装了Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-vuecli-project

# 接下来会有一系列选项，咱们选Manually select features
# 勾选上Babel、Router、Vuex、CSS Pre-processors、Linter
# 一路回车，等项目创建完成

cd my-vuecli-project
npm run serve

等个几十秒（取决于你的电脑配置），项目就跑起来了。看到那个熟悉的Vue logo了吗？恭喜你，一个标准的Vue项目骨架就搭好了！

现在，咱们来看看Vue CLI项目的典型结构：

src/
├── components/
│   └── HelloWorld.vue
├── views/
│   ├── Home.vue
│   └── About.vue
├── router/
│   └── index.js
├── store/
│   └── index.js
├── App.vue
└── main.js

这种结构是不是很眼熟？这就是Vue项目的“标准答案”，特别适合团队协作，新成员上手毫无压力。

Vue CLI的杀手锏：

vue.config.js文件可以让你轻松覆盖Webpack配置
环境变量管理（.env、.env.production）
丰富的插件系统
对旧浏览器的完美支持

不过，Vue CLI也有个小缺点：项目大了以后，启动速度和热更新会明显变慢。这时候，就该Vite闪亮登场了！

Vite：快如闪电的“新时代宠儿”

如果说Vue CLI是稳重的大叔，那Vite就是充满活力的少年。它的设计理念就一句话：在开发阶段，为什么要打包？

传统工具像Webpack，需要先把所有模块打包成一个bundle，然后才能启动开发服务器。而Vite直接利用浏览器原生支持ES模块的特性，只在需要时编译当前用到的文件。这个思路的转变，带来了性能的质的飞跃。

来，感受一下Vite的速度：

# 创建Vite项目
npm create vite@latest my-vite-project -- --template vue

cd my-vite-project
npm install
npm run dev

注意看时间！从我敲下npm run dev到浏览器打开页面，大概就一两秒钟。这种体验，用过就回不去了。

Vite项目的目录结构跟Vue CLI很像，但更简洁：

src/
├── components/
│   └── HelloWorld.vue
├── App.vue
└── main.js

Vite的牛逼之处：

闪电般的冷启动（秒开不是梦）
极致的热更新（只更新修改的部分）
开箱即用的TypeScript支持
对Vue 3的完美支持

不过Vite也不是万能的，它在生产环境还是需要打包的（用Rollup），而且对某些特殊需求的Webpack插件支持不够完善。

实战对比：两个完整示例

光说不练假把式，咱们来写两个具体的例子，看看在不同场景下该怎么选择。

示例1：用Vue CLI搭建后台管理系统

假设我们要做一个用户管理系统，需要兼容IE，还需要PWA支持。这种传统但要求稳定的项目，Vue CLI再合适不过。

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<!-- UserList.vue -->
<template>
  <div class="user-list">
    <h2>用户列表</h2>
    <table>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@email.com' },
        { id: 2, name: '李四', email: 'lisi@email.com' }
      ]
    }
  }
}
</script>
<style scoped>
.user-list {
  padding: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
</style>

这种基于Options API的写法，在Vue CLI项目里非常常见，稳定可靠，适合大型团队协作。

示例2：用Vite打造现代化单页应用

现在咱们换个场景，要做个个人博客，追求极致开发体验和现代浏览器特性。这时候，Vite + Vue 3的组合拳就派上用场了。

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

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

<!-- BlogPost.vue -->
<template>
  <article class="blog-post">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <button @click="likePost">点赞 {{ likes }}</button>
  </article>
</template>
<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  title: String,
  content: String
})

const likes = ref(0)
const likePost = () => {
  likes.value++
}
</script>
<style scoped>
.blog-post {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #eee;
}
</style>

看到区别了吗？Vite项目天然适合Composition API，代码更简洁，逻辑复用更灵活。而且开发过程中的每次修改，都是秒级更新，那种流畅感，真的让人上瘾。

到底该选谁？给你最实在的建议

看了这么多，你可能还是有点纠结。别急，我给你个超级实用的选择指南：

选Vue CLI当：

项目需要兼容旧浏览器（比如IE）
团队对Webpack生态依赖很深
需要大量自定义Webpack配置
做Vue 2项目

选Vite当：

追求极致的开发体验
项目只面向现代浏览器
想要更快的构建速度
做Vue 3项目

说实话，现在新项目我基本上都会首选Vite。除非有明确的兼容性要求，否则那种飞一般的开发体验，真的让人回不去了。

进阶技巧：两个工具的小窍门

Vue CLI性能优化：
在vue.config.js里可以这样配置：

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all'
    })
  }
}

Vite插件玩法：
Vite的插件生态越来越丰富：

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

export default defineConfig({
  plugins: [vue()]
})

结尾彩蛋：未来趋势怎么看？

Vue官方已经明确表示，Vue CLI会进入维护模式，未来的重心在Vite上。所以，如果你现在要学新技术，我强烈建议把Vite作为重点。

但这不代表Vue CLI就没用了。现有的Vue 2项目还要维护好几年呢，而且那些特殊需求的项目，依然需要Vue CLI的稳定性。

总结

好了，朋友们，今天的深度之旅就到这儿。咱们一起认识了Vue CLI这位“老将”和Vite这位“新星”，看了它们的实际表现，也知道了该怎么选择。

记住，工具没有绝对的好坏，只有适不适合。Vue CLI像是一辆可靠的SUV，能应对各种复杂路况；Vite像是超级跑车，在合适的赛道上能发挥极致性能。

现在，轮到你了！打开电脑，分别用Vue CLI和Vite创建两个项目，亲身感受一下它们的区别。相信我，实践之后的体会，比读十篇文章都有用。