Vue CLI脚手架
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202053752-746911592.png)
Vue CLI 安装和使用
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202111008-633521807.png)
vue create 项目的过程
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202220522-1763012674.png)
项目的目录结构
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202313466-2134101979.png)
认识Vite
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202752200-687760885.png)
Vite的构造
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202815600-1314590755.png)
浏览器原生支持模块化
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202846858-2083254751.png)
Vite的安装和使用
- npm install vite –g # 全局安装
- npm install vite –D # 局部安装
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202911680-592614629.png)
Vite对css的支持
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604202950565-962294920.png)
Vite对TypeScript的支持
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203020075-1803568547.png)
Vite对vue的支持
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203413993-451513000.png)
Vite打包项目
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203428836-605672908.png)
demo
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203503645-498509834.png)
vite.config.js
const vue = require('@vitejs/plugin-vue')
module.exports = {
plugins: [
vue()
]
}
ESBuild的构建速度
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203531772-1531188422.png)
Vite脚手架工具
npm init @vitejs/app
npm install @vitejs/create-app -g
create-app
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203556412-663725374.png)
demo
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210604203730306-546751175.png)
vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
});