介绍

官方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';
  4. export default defineConfig(({command}) => {
  5. return {
  6. resolve: {
  7. alias: {
  8. '@': '/src',
  9. }
  10. },
  11. plugins: [
  12. vue(),
  13. ],
  14. };
  15. });

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

后面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
  3. # .less
  4. npm install -D less
  5. # .styl and .stylus
  6. 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'
  3. // 1、引入插件
  4. import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
  5. export default defineConfig({
  6. plugins: [
  7. vue(),
  8. // 2、使用插件
  9. ViteComponents({
  10. customComponentResolvers: [AntDesignVueResolver()],
  11. }),
  12. ]
  13. })

更多插件

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

配置见别名