【vue】vue脚手架以及vite介绍

news2025/1/22 21:12:12

内容

- 一、VUECLI
- 二、关于cli的原理
- 三、vite
- 四、使用vite
- 五、vite处理css、less、postcss、ts
- 六、vite对vue的支持：
- 七、预打包：
- 八、关于vite打包
- 九、真实项目中不会一直使用npx的
- 十、ESBuild
- 十一、vite脚手架，

一、VUECLI

先安装这个工具：npm install @vue/cli -g 全局安装，这样在哪个文件夹下都能使用cli工具
升级的话npm update @vue/cli -g
通过vue命令创建项目：
vue create 项目名称
为什么install时候写的@vue/cli，实际用的确实vue，因为@vue/cli项目中的package.json里的bin：{‘vue’:“bin/xxx.js”}

插图1

cli创建出来的项目结构：
插图二

在vscode中 ,
cd 09_vue_demo
npm install //安装依赖，如果有依赖了就不用安装了
npm run serve //起项目

二、关于cli的原理

插图3
在这里插入图片描述

三、vite

vite：下一代前端开发与构建工具，能显著提升前端开发体验
vite的构造，由一个服务器和一套构建指令组成
1、开发阶段：一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速
2、打包阶段：一套构建指令，它使用rollup(内置)打开我们的代码，并且它是预配置的，可以输出生产环境的优化过的静态资源

插图4

四、使用vite

第一步：npm install vite -D
第二步：npx vite 非常快，也是个优点
打开vite提供的地址，进去就能看到vite帮助我们发起的项目

把main.js上边import导入的路径或者模块，删掉.js也是可以的了。因为vite是可以帮助我们解析的
浏览器的网络请求只是请求loadsh-es了，而不是二百多个

五、vite处理css、less、postcss、ts

新建css文件
只要html导入了就可以运行，不像webpack 需要loader等等
新建less文件
只要npm install less -D安装一下就行了，不像webpack 需要loader等等
处理postcss
只要npm install postcss -D，npm install postcss-preset-env -D，新建postcss.config.js就行了，不像webpack 需要loader等等

新建ts文件
只要main.js导入这个ts了就可以运行

原理：
在这里插入图片描述

六、vite对vue的支持：

vue3单文件组件支持：@vitejs/plugin-vue
vue3 JSX支持：@vitejs/plugin-vue-jsx
vue2支持：underfin/vite-plugin-vue2

npm install @vitejs/plugin-vue -D
npm install @vue/compiler-sfc -D
弄了插件就要做配置
新建vite.config.js
const vue = require(‘@vitejs/plugin-vue’)//这是个函数，且实在node环境下所以用require
module.exports = {
plugins:[
vue()
]
}