当前位置：首页 > news >正文

（09）Vue脚手架的使用（Vite、vue-cli、create-vue）

news 来源：原创 2025/5/4 15:51:54

本系列教程目录：Vue3+Element Plus全套学习笔记-目录大纲

文章目录

第3章 Vue脚手架
- 3.1 vite
- - 3.3.1 Vite使用
  - - 1）创建Vite项目
    - 2）Vite项目打包
  - 3.1.2 组件化开发
  - 3.1.4 Vite工程运行原理
  - - 1）分析main.js
    - 2）自定义根组件
- 3.2 vue-cli
- - 3.2.1 vue-cli的使用
  - 3.3.2 @vue/cli的使用
- 3.2 create-vue

第3章 Vue脚手架

作为后端程序员，我们熟悉项目初始化工具，比如 Spring Initializr，它可以帮助我们快速搭建一个具有Spring环境的项目结构，另外还支持我们勾选自己需要的功能，如模板引擎、Redis环境、Spring Security、测试单元等。

前端脚手架其实和它们非常相似，只不过它是针对前端开发的，即快速帮我们搭建一个整合好了Vue（React、Angular）环境的项目结构，同时也允许我们勾选自己所需要的前端功能，如Vue-Router、Pinia、Vitest等。

不同的前端框架有不同的脚手架工具，但核心思想是一样的：一键生成项目。

下列是常用脚手架以及适用框架对比：

脚手架名称	适用框架	底层构建工具	特点
`create-vue`	Vue 3	Vite	官方推荐，底层采用Vite，轻量快速
`Vue CLI`	Vue 2	Webpack	功能强大但较重，已不推荐使用
`create-react-app` (CRA)	React	Webpack	Facebook 官方维护
`create-next-app`	React	Vite/Webpack	支持 SSR/SSG
`Angular CLI` (`ng new`)	Angular	Webpack	官方 CLI，企业级
`Vite`	通用（Vue/React/Svelte）	Vite	通用（可搭配 Vue/React/Svelte）

我们可以站在后端视角上来观察这些前端脚手架：

概念	前端	后端类比
项目初始化	`create-vue` / `create-react-app`	`Spring Initializr`
构建工具	Vite / Webpack	Maven / Gradle
依赖管理	npm / pnpm / yarn	Maven / pip / bundler

3.1 vite

Vite（法语中意为“快”）是由 Vue.js 作者尤雨溪（Evan You）开发的一个新型前端构建工具。

同时，Vite也是一个现代化的前端脚手架，以其快速的开发体验和高效的构建性能而闻名。对于熟悉 Vue 的你来说，Vite 是一个天然的搭档，可以帮助你更高效地开发和构建项目。

Vite官网：https://cn.vitejs.dev/

查看Vite版本：

C:\Users\Administrator>npm view create-vite versions['0.0.0-alpha.0', '0.0.0',        '2.5.0',        '2.5.1','2.5.2',         '2.5.3',        '2.5.4',        '2.6.0','2.6.1',         '2.6.2',        '2.6.3',        '2.6.4','2.6.5',         '2.6.6',        '2.7.0',        '2.7.1','2.7.2',         '2.8.0',        '2.9.0',        '2.9.1','2.9.2',         '2.9.3',        '2.9.4',        '2.9.5','3.0.0',         '3.0.1',        '3.0.2',        '3.1.0','3.2.0',         '3.2.1',        '4.0.0-beta.0', '4.0.0','4.1.0-beta.0',  '4.1.0',        '4.2.0-beta.0', '4.2.0-beta.1','4.2.0',         '4.3.0-beta.0', '4.3.0',        '4.3.1','4.3.2',         '4.4.0',        '4.4.1',        '5.0.0-beta.0','5.0.0-beta.1',  '5.0.0',        '5.1.0',        '5.2.0','5.2.1',         '5.2.2',        '5.2.3',        '5.3.0','5.4.0',         '5.5.0',        '5.5.1',        '5.5.2','5.5.3',         '5.5.4',        '5.5.5',        '6.0.0','6.0.1',         '6.1.0',        '6.1.1',        '6.2.0','6.2.1',         '6.3.0',        '6.3.1'
]

以下是Vite版本与NodeJS版本对应关系：

Vite 版本	推出时间	最低 Node.js 版本	推荐 Node.js 版本	说明
Vite 2.x	2021 年	Node.js 12.20.0+	Node.js 14.16.0+	初始支持现代前端工具链，需基础 ES Module 兼容性。
Vite 3.x	2022 年 7 月	Node.js 14.18.0+	Node.js 16.0.0+	引入更严格的 ESM 规范，依赖 Node.js 14.18+ 的 ESM 修复。
Vite 4.x	2022 年 12 月	Node.js 14.18.0+	Node.js 16.0.0+	兼容旧版 Node.js，但推荐升级到 16/18（因 Node.js 14 已结束维护）。
Vite 5.x	2023 年 11 月	Node.js 18.0.0+	Node.js 20.0.0+	全面拥抱现代环境，放弃 Node.js 16 支持，依赖新特性（如 ESM 解析改进）。
Vite 6.x	2024 年 11 月	Node.js 18.0.0+	Node.js 20.0.0+	兼容旧版 Node.js，但推荐升级到 20+版本

3.3.1 Vite使用

1）创建Vite项目

创建一个空的文件（Vue-01），打开控制台，输入初始化命令：

# 创建一个vite项目
npm create vite# 创建一个最新版本的vite项目,项目名为my-vite-app
npm create vite@latest my-vite-app

接着进vite初始化命令窗口：

npx: installed 1 in 1.437s
│
◆  Project name:			# 输入项目名（默认为vite-project）
│  vite-project
└◇  Select a framework:		# 选择初始化的框架（Vue）
│  Vue
│
◇  Select a variant:		# 选择语言（JavaScript）
│  JavaScript
│
◇  Scaffolding project in E:\BaiduSyncdisk\01\doc\Temp\docCode\Vue-02\Vue-01\vite-project...
│
└  Done. Now run:cd vite-project			# 初始化成功npm installnpm run dev

vite的项目结构如下：

vite-project就是我们的项目，文件夹描述如下：

public：静态资源目录，放置在该文件夹下的文件可以通过浏览器直接访问。
src：资源访问路径，存放Vue的所有组件。

运行npm install命令安装vite项目所需依赖，之后输入npm run dev将项目启动。

2）Vite项目打包

npm run build		 # 构建后生成dist 文件夹

打包之后，我就可以将打包之后的文件部署到服务器中，前端可以直接访问

前后分离方式：需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
前后不分离方式：把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面

3.1.2 组件化开发

Vue的单页面开发其实很简单又很抽象，单页面是指唯一的Vue示例，也就是main.js里的new Vue({})；那么多页面的效果是怎么实现的呢？这就依赖于组件化开发，每一个子页面都由多个组件构成，在url改变时刷新并渲染不同的组件群，这就达到了多页面的效果。

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

几乎任意类型的应用界面都可以抽象为一个组件树，如图所示：

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

下面是一个单文件组件的示例：

<script setup>//编写脚本
</script><template>//编写页面模板
</template><style scoped>//编写样式
</style>

vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script>和<style>三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。

在src/components中定义一个demo01.vue组件，

<script setup></script><template><div><h1>Hello Demo01</h1></div></template><style scoped></style>

在App.vue中使用组件：

<script setup>
// 导入demo01组件
import demo01 from "./components/demo01.vue";
</script><template><!-- 使用demo01组件 --><demo01 />
</template><style scoped></style>

这样一个组件的使用就完成了。

3.1.4 Vite工程运行原理

以Vite项目为例，程序的入口为index.html，

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><!-- 定义一个div容器，作为Vue的渲染目标 --><div id="app"></div><!-- 导入main.js文件   --><script type="module" src="./src/main.js"></script></body></html>

main.js分析：

// 导入Vue的createApp函数
import { createApp } from 'vue'// 导入样式
import './style.css'// 导入App组件
import App from './App.vue'// 创建Vue应用实例
const app = createApp(App)// 注册组件
app.mount('#app')

1）分析main.js

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：

import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。

import { createApp } from 'vue'// 从一个单文件组件中导入根组件
import App from './App.vue'// 创建一个Vue实例（根组件）
const app = createApp(App)

但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。例如，一个待办事项 (Todos) 应用的组件树可能是这样的：

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter├─ TodoClearButton└─ TodoStatistics

2）自定义根组件

（1）在index.html定义与Vue关联的标签

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><!-- 定义一个div容器，作为Vue的渲染目标 --><div id="app"></div><div id="show"></div><!-- 导入main.js文件   --><script type="module" src="./src/main.js"></script></body></html>

（2）定义根组件，在src目录下定义Show.vue：

<script setup></script><template><div><h1>Show</h1><p>我是Show组件</p></div></template><style scoped></style>

（3）在main.js中导入Show组件，然后将其注册到Vue中

// 导入Vue的createApp函数
import { createApp } from 'vue'// 导入样式
import './style.css'// 导入App组件
import App from './App.vue'
import Show from './Show.vue'// 创建Vue应用实例
const app = createApp(App)
const show = createApp(Show)// 注册组件
app.mount('#app')
show.mount('#show')

打开页面：

3.2 vue-cli

vue-cli 是 Vue 早期推出的一款脚手架，vue-cli诞生于2016年，伴随 Vue 2.x 发展。它使用 webpack 创建 Vue 项目，也可以选择安装需要的各种插件，比如 Vuex、VueRouter等。

vue-cli 用于创建 vue2 的项目；随着Vue的更新，官方也推出了@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。

Vue CLI 2.x：早期版本，基于 Webpack 模板生成项目，配置复杂。
Vue CLI 3+：现代化版本，支持插件系统、图形化界面，配置更灵活。

对比如下：

命令	对应版本	状态	发布时间
`npm install vue-cli`	Vue CLI 2.x	已废弃	2016-2018
`npm install @vue/cli`	Vue CLI 3+	官方维护	2018 至今

vue-cli与@vue-cli核心功能对比：

功能	`vue-cli`（2.x）	`@vue/cli`（3+）
项目初始化	`vue init webpack my-project`	`vue create my-project`
配置方式	直接修改 Webpack 配置	通过 `vue.config.js` 覆盖配置
插件系统	不支持	支持插件（如 Vue Router、Vuex）
图形化界面	无	提供 `vue ui` 管理项目
依赖管理	固定模板	按需选择功能（TypeScript、测试等）

vue-cli官网：

目前，在vue-cli官网已经明确说明：“现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。另外请参考 Vue 3 工具链指南以了解最新的工具推荐。”

vue-cli官网地址：https://cli.vuejs.org/zh/

3.2.1 vue-cli的使用

首先安装全局的@vue/cli命令（要保证没有安装@vue/cli）：

npm install -g vue-cli

使用vue-cli初始化项目：

# 语法
vue init webpack my-project-name# 使用示例
vue init webpack vue-demo-2.0# 下面是项目的默认配置，全部直接回车（Yes）
? Project name vue-demo-2.0      		      
? Project description A Vue.js project	
? Author								
? Vue build standalone      			
? Install vue-router? Yes             
? Use ESLint to lint your code? Yes               
? Pick an ESLint preset Standard
? Set up unit tests Yes              
? Pick a test runner jest                
? Setup e2e tests with Nightwatch? Yes                                                                  
? Should we run `npm install` for you after the project has been created? (recommended) npm

项目结构如下：

启动项目：

# 进入项目
cd vue-demo-2.0# 启动项目
npm run dev

访问：http://localhost:8080

3.3.2 @vue/cli的使用

首先安装全局的@vue/cli命令（要保证没有安装vue-cli）：

npm install -g @vue-cli

然后使用vue命令创建一个项目：

vue create vue-demo-3.0# 选择vue的版本
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)			# vue3Default ([Vue 2] babel, eslint)			# vue2Manually select features

以下是使用@vue-cli创建的vue项目结构：

启动项目：

npm run serve

访问：http://localhost:8080

3.2 create-vue

@vue/cli和create-vue都是Vue的脚手架工具且都支持Vue3，但它们属于不同的版本和生态系统。两者最本质的区别是所采用的构建工具不一样，create-vue是基于Vite而@vue/cli是基于Webpack。

特性	@vue/cli	create-vue
底层构建工具	Webpack	Vite
项目初始化方式	交互式选择配置 + 插件系统	极简配置 + 现代化预设
启动/构建速度	较慢	极快（10-100 倍提升）
配置复杂度	高（需处理 Webpack）	低（开箱即用，按需扩展）
冷启动速度	需要完整打包所有文件，项目越大启动越慢。	基于浏览器原生 ESM，按需编译，秒级启动。
热更新	需重新打包部分模块，耗时 1-3 秒。	直接更新单个模块，毫秒级响应。
官方定位	Vue 2 时代的主流工具	Vue 3 官方推荐的新标准
未来维护	维护阶段，新特性较少	活跃开发，持续优化

总结下来就是create-vue性能、速度、配置复杂度等各方面都由于全方面优于@vue/cli。@vue/cli 虽然支持 Vue 3，但已不再作为主要发展方向。Vue 核心团队已将资源倾斜到 Vite 和 create-vue，Vue 官网推荐新项目使用 create-vue。

创建create-vue项目：

npm create vue

选择合适的组件：

◆  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  ◻ TypeScript
│  ◻ JSX 支持
│  ◻ Router（单页面应用开发）
│  ◻ Pinia（状态管理）
│  ◻ Vitest（单元测试）
│  ◻ 端到端测试
│  ◻ ESLint（错误预防）
│  ◻ Prettier（代码格式化）

以下是使用create-vue创建的vue项目结构：