Vue–》超详细教程——vite脚手架的搭建与使用

vite

vue官方提供了两种快速创建工程化的SPA项目的方式，一种是基于 vue-cli 创建的SPA项目，另一种就是基于 vite 创建的SPA项目。两者的区别如下：

说明	vite	vue-cli
支持的vue版本	仅支持vue3.x	支持3.x和2.x
是否基于webpack	否	是
运行速度	快	较慢
功能完整度	小而巧（逐渐完善）	大而全
企业级项目使用情况	逐渐趋于主流	主流

vite作为新一代的前端构建工具，它的优势如下：在开发环境中，无需打包操作可快速冷启动；轻量快速的热重载(HMR)，真正的按需编译，不用再等待整个应用编译完成。其官方文档：Vite

创建 vite 项目

按照如下命令创建vite项目即可。（注意：这里需要node版本在12以上），想要切换node版本的推荐看一下右边的文章：nvm版本管理控制。

npm init vite-app 项目名称

安装完成之后将文件拖到编译器中，我这边是VScode，打开终端，输入 npm i 安装一下依赖包：

接着在终端执行 npm run dev 执行项目，打开本地链接，至此 vite 项目创建完成。

创建最新框架版本的vite

上面虽然能使用vite，创建Vue3的项目，但Vue框架并不是最新版本的，安装也是傻瓜式的安装，如果想创建最新版本的vue项目，终端按照如下命令即可：

npm init vite@latest 项目名称

选择你要安装的框架，这里我选择vue：（上下键进行选择，空格进行确定）

选择完vue，让你选择基于什么语言进行创建，这里我选择TS：

选择完成之后，将创建好的文件夹拖到编辑器上，打开项目的终端，执行npm i安装一下依赖即可

执行npm run dev可以看到项目已经运行起来了：

因为vite搭建的项目是没有给你选择less等样式已经路由的选择的，所以需要你自行去安装：

# 安装less
npm install less 
# 安装router
 npm install vue-router@指定版本

目录文件的构成

使用 vite 创建的项目结构如下：

在src这个项目源代码目录下，包含了如下的文件和文件夹：

vite项目的运行流程

在工程化的项目中，vue要做的事情很简单，通过main.js把App.vue渲染到index.html的指定区域中

// 按需导入 createApp 函数
import { createApp } from 'vue'
// 导入待渲染的App.vue组件
import App from './App.vue'

// 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App)

// 调用 mount() 把 App 组件的模板结构，渲染到指定的el区域中
app.mount('#app')

在Vue3中的template中，不需要在定义大容器div进行包裹，节点里写多个元素也能运行：