介绍

官方github
https://github.com/vitejs/vite

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

image.png
image.png
Vite是Vue官方开发的

构造

image.png

1、开发服务器

基于原生ES模块，现代浏览器都支持ES模块化（import、export），能直接运行，省去了webpack构建的过程（webpack每次修改都会自动构建一次，把构建的文件放到内存运行）
image.png

那是不是不用构建工具？肯定是要的。

1、因为你还有很多文件，如.vue，.ts，.less等文件，这些浏览器是无法直接识别。而Vite会把这些文件转成JS，让他和其他JS代码跑在浏览器上。

2、如果你项目依赖很多包，没有构建工具的情况下，浏览器访问会全部一次请求过来，可能会有几百个文件，严重影响浏览器和服务器性能。而Vite用到哪些包，才请求哪些包，不需要一次请求过来。

服务器原理

vite1 之前是用Koa作为本地服务器，后来改为了Connect，因为这个服务器很容易做请求的转发。
image.png
image.png

比如我编写了xxx.ts，这个浏览器是不支持的，启动服务器时，Vite会把xxx.ts转换成ES6 JS代码。
image.png

用户访问服务器时，Connect服务器看到你要xxx.ts文件，他就会给你转换成JS代码的文件
image.png

2、打包构建指令 ESBuild

image.png image.png
ESBuild 是Go语言实现的，所以可以支持Go的API

image.png（可能有些夸大）

ESBuild为什么这么快呢？
1、使用Go语言编写的，可以直接转换成机器代码，而无需经过字节码；
image.png

2、ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行；

3、ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就可以考虑各种性能问题；

=======================

在项目内安装

image.png

安装Vite

（官方是推荐直接用命令创建项目）

  1. npm install vite –g # 全局安装
  2. npm install vite –D # 局部安装

全局安装：任意一个地方打开命令行，都可以运行vite命令。好处就是全局都可以运行

局部安装：只在项目里面安装，需要在项目内打开命令行，输入npx vite命令才能运行。好处就是项目兼容性好，不会因为全局的vite版本影响项目。
image.png

查看版本

  1. vite -v

image.png

安装和配置Vue3

如果不是通过官方直接创建项目的话，Vite是不自带Vue的，目的就是希望不只是Vue用Vite，其他如React也可以用Vite

1、安装Vue3

  1. npm i vue@next -D

2、引入Vue3

然后在入口main.js引入Vue3，和Vue入口APP组件
image.png
挂载App组件到一个ID为app的元素
image.png image.png

3、安装插件

然后安装插件，让Vite对Vue支持
image.png
Vue3插件

  1. npm install @vitejs/plugin-vue -D

sfc插件（单文件组件，也就是识别 .vue 文件的插件）

  1. npm install @vue/compiler-sfc -D

4、配置

最后创建vite的配置文件：vite.config.js，然后配置插件
image.png

=======================

启动本地开发服务器

image.png
全局安装的情况下启动：

  1. cd D:/项目的路径
  2. vite

局部安装的情况下启动：

  1. cd D:/项目的路径
  2. npx vite

image.png
如果是用vscode作为编辑器，在左下角可以看到NPM脚本，直接点一下就运行局部安装的vite了，非常方便

构架生产环境-Vue3项目

全局安装的情况下启动：

  1. cd D:/项目的路径
  2. vite build

局部安装的情况下启动：

  1. > cd D:/项目的路径
  2. > npx vite build

image.png

预览生成环境项目

正常我们要把dist里面构架好的文件，放到WEB服务器里面运行，比如微软的IIS、Tomcat、Apache、Nginx等

而Vite提供预览，方便我们跳过这个步骤

全局安装Vite的情况：

  1. vite preview

局部安装Vite的情况：

  1. npx vite preview

配置脚本

image.png
后面直接运行npm run 命令 即可

=======================

Vite脚手架创建Vue3项目

image.png
帮你局部安装了vite，安装了Vue3和Vue3插件

  1. > cd D:/项目的路径
  2. > npm init @vitejs/app

image.png

会询问用什么框架，可以根据自己的项目选择，目前支持vue和react等，
image.png
然后问你要不要ts
image.png
如果选ts，配置会自动变成ts
image.png
image.png
然后可以直接用ts，无需额外安装其他东西
image.png
image.png

=======================

其他配置

默认有隐藏的配置，免得你手动去弄，开箱即用。

但是如果你想自己配置，也可以。默认是在项目主目录下创建一个名为 vue.config.js 的文件

别名 alias

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import { viteMockServe } from 'vite-plugin-mock';
  5. export default defineConfig(({command}) => {
  6.   return {
  7.     resolve: {
  8.       alias: {
  9.         '@': '/src',
  10.       }
  11.     },
  12.     plugins: [
  13.       vue(),
  14.     ],
  15.   };
  16. });

如果是用TS，tsconfig.json里面还要配置一下path 才行，否则ts会报错说找不到对应模块

  1. {
  2.   "compilerOptions": {
  3.     "target": "esnext",
  4.     "module": "esnext",
  5.     "moduleResolution": "node",
  6.     "strict": true,
  7.     "jsx": "preserve",
  8.     "sourceMap": true,
  9.     "resolveJsonModule": true,
  10.     "esModuleInterop": true,
  11.     "lib": ["esnext", "dom"],
  12.     "paths":{
  13.       "@/*": ["./src/*"]
  14.     }
  15.   },
  16.   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  17. }

开发服务器代理 proxy （重要，解决跨域）

注意！只有在开发dev时有效，打包部署上线时无效

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import path from 'path'
  5. // 定义 vite 的配置
  6. export default defineConfig(({ command }) => {
  7.   return {
  8.     resolve: {
  9.       // 路径别名
  10.       alias: {
  11.         '@': path.resolve(__dirname, 'src'),
  12.       }
  13.     },
  14.     // 服务器选项
  15.     server: {
  16.       // http-proxy 代理，原理是改变其他电脑发送请求头RequestHeader的源Origin，
  17.       // 使得每台电脑的源Origin = 服务器端设置的响应头ResponseHeader的 Access-Control-Allow-Origin 属性，
  18.       // 浏览器就不会因为安全问题而报错
  19.       proxy: {
  20.         // 固定写法，如果写成'/'会导致Error: socket hang up
  21.         '/api': {
  22.           // target: 'http://你的前端服务器IP:前端服务器端口'
  23.           target: 'http://192.168.0.185:3000',
  24.           // target: 'http://111.230.235.172',
  26.           // 是否改变每台访问前端服务器的浏览器的源Origin？true为改变
  27.           changeOrigin: true,
  29.           // 固定写法，因为上面写了/api，实际上我们的请求都不带api，这里要替换掉
  30.           rewrite: (path) => path.replace(/^\/api/, '')
  31.         },
  32.       }
  33.     },
  34.     plugins: [
  35.       vue(),
  36.     ],
  37.   };
  38. });

后面axiso的请求要写为：

  1. const testFunction = () => {
  2.   axios({
  3.     baseURL:'/api', // 注意，proxy查找的'/api'，是查找baseURL的，并不是查找下面的url，然后会自动把'/api'替换成target
  4.     url:"/testFun",
  5.     method:"get",
  6.   }).then((res) => {
  7.     console.log(res);
  8.   });
  9. };

跨域可以查看 https://www.yuque.com/yejielin/mypn47/krxlh0#AbU2x

特点

CSS 和 JSON

可以直接import进来使用
image.png

其他CSS

官方文档有说明，Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

  1. # .scss and .sass
  2. npm install -D sass
  4. # .less
  5. npm install -D less
  7. # .styl and .stylus
  8. npm install -D stylus

路径url

可以使用绝对路径和相对路径。

如果用了绝对路径，打包生产时，就会把文件放入dist文件夹内然后对文件名进行哈希化。

JSX

支持，直接写jsx文件即可
image.png

第三方包预编译

image.png
第一次启动vite服务器的时候，会对较大的第三方包进行预编译，然后储存到node_modules/.vite 文件夹内。
image.png

一般这些包是不随随便便修改或者升级的，因此下次再启动直接来读取这部分的代码，就不用再编译了，启动就更快了。
image.png

========================

插件plugin

组件按需加载（重要）

根据目前比较强大的UI组件库 Ant Design Vue 2.x 的介绍 https://2x.antdv.com/docs/vue/introduce-cn/，有一个名为 vite-plugin-components 的插件可以做到按需加载组件，并且很多UI组件都支持，如下
image.png
于是查了一下官方说明：https://github.com/hannoeru/vite-plugin-components，发现还是比较强大的，连其他组件都无需通过components注册了，但是仅限于 /src/components下的 .vue 组件（不管套多少层文件夹，只要在components文件夹下就行）

安装：

  1. npm i vite-plugin-components -D 
  2. # 或者
  3. yarn add vite-plugin-components -D

插件配置（TS版本）：

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  4. // 1、引入插件
  5. import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.     // 2、使用插件
  11.     ViteComponents({
  12.       customComponentResolvers: [AntDesignVueResolver()],
  13.     }),
  14.   ]
  15. })

更多插件

https://github.com/vitejs/awesome-vite

LESS

css的一种增强的插件，可以查看 https://www.yuque.com/yejielin/mypn47/ghbmfu

安装：

  1. npm i less -D

配置：
不用配置，直接可以写xxx.less文件，vite会自动处理

POSTCSS

css前缀转换工具
image.png
安装：

  1. npm install postcss-loader -D

安装后，要对应的功能要安装对应的插件

安装对应插件：
比如下面的是自动添加浏览器前缀，用于适配其他浏览器

  1. npm install postcss-preset-env -D

配置：
创建postcss.config.js ，输入配置
Vite - 图40











mock模拟数据

https://github.com/anncwb/vite-plugin-mock/blob/main/README.zh_CN.md

配置见别名