【vite】-【vite介绍】-【vite的基础应用】-【vite的高级应用】-【

目录

  • vite介绍
  • vite的基础应用
    • vite创建项目
      • vite创建vue3项目
      • vite创建vue2项目
      • vite创建react项目
    • vite中使用css的各种功能
    • vite中使用ts
    • vite中处理静态资源的方法
    • vite集成eslint和prettier
    • vite中的env环境变量
  • vite的高级应用

vite介绍

一、特点:

  1. 开发时效率极高
  2. 开箱即用,功能完备
  3. 摄取丰富,兼容rollup
  4. 超高速热重载
  5. 预设应用和类库打包模块
  6. 前端类库无关

二、vite是构建工具的高阶封装,内部使用的是其他的工具,最核心的是rollup
三、vite的目标:

  1. 使用简单:配置项少,把能封装的配置都封装好了,不会让你非常深度的接触一些配置;内部集成devServe,不需要像使用web pack那样再加入devServe再配置再使用;
  2. 快:得益于他的底层架构设计
  3. 便于扩展:兼容rollup插件rollup比webpack发布早,使用率高,社区成熟,插件多

四、和传统构建工具的区别:high level api;不包含自己编译能力(vite底层的编译能力源自rollup、esbuild,vite本身不参与编译,他只是集成了rollup的功能,启动了deserve,vite帮我们做一个串联,去管理模块的图谱,监听文件的更新来进行推送);完全基于esm加载方式的开发式

  1. webpack:他希望他可以把所有能考虑的东西都考虑进去,同时他希望他的核心功能能够帮助其他的功能实现,比如可以通过webpack实现webpack dev serve
  2. rollup:诞生就是为了build esm的module,同时他专注于build javascript,而不考虑平台

webpack编译出来的代码中会有很多webpack的工具函数,来帮助我们加载模块,比如在浏览器中我们要import另外的模块,我们通过script标签引入这个js,然后在js加载完后执行回调函数来将模块加载完成,webpack提供了各种帮助函数来帮助我们做这个事,但rollup不会有自己专有的函数,他遵循esm标准,他build出来的代码符合commonjs、umd标准,这是因为rollup更多是为了让工具类库来使用,他的初衷不是为前端项目服务。而vite的目标是工程,是项目开发,而webpack和rollup他们是工具,他们想执行的是构建,vite更上层,更high level
vite是为项目而生,不是为构建而生,他减少了很多配置量,主要减少在于:

  1. dev server:如果使用webpack配置一个项目,一定要配置dev serve,但是通过vite的命令生成的项目会自动集成dev serve,或者说vite的核心就是dev serve,vite中很大一部分是dev serve
  2. 各类loader:在webpack中需要配置css-loader、post-css-loader、ts-loader等,而vite已经通过插件的形式内置了这些内容,开箱即用
  3. build命令:内置了build命令,通过vite build可以build类库,也可以build项目,对于webpack而言需要自己写命令,开发时的配置和生产的配置可能又不一样,又需要做一些处理

五、vite优势:上手简单、开发效率高、社区成本低(兼容rollup插件)、没有复杂晦涩的配置
六、

vite的基础应用

vite创建项目

vite创建vue3项目

vite创建vue2项目

vite创建react项目

vite中使用css的各种功能

一、推荐使用css variable:简单来说就是在css文件中可以进行变量定义
请添加图片描述
:root代表命名空间,在:root下定义的所有变量在所有选择器中都可以使用,也可以对某一类标签进行样式的定义,那这些样式就只能在某一类标签中使用
二、postcss:vite已集成postcss,如果想用的话,新建postcss.config.js,在里面声明要用的postcss
请添加图片描述
该postcss用于在编译css文件时进行输出:
请添加图片描述
三、@import alias:引入文件时,通过@指向某个目录,在vite.config.js中进行如下配置:
请添加图片描述
在css中的import也可以使用:@import url("@styles/other.css")
四、css-modules:如果希望css的类名不根据我们写的类名,而是根据映射关系进行编译,这样类名就变成了无意义的,并且可以作为一个可以收缩的字符串,同时可以进行去重,对应到vite中,只用在创建css时,文件名写:css文件名.module.css
请添加图片描述
使用时:

<script>import classes from "@style/test.module.css";</script>
<div class={`${classes.moduleClass}`}>hello world</div>

五、css预处理器:安装yarn add less即可使用
请添加图片描述

vite中使用ts

一、vite天生支持ts,因为vite使用esbuild,esbuild支持ts语法,值得注意的是,vite值编译,不做校验,也就是说,他只是把ts语法编译成js,让其可在浏览器中运行,但他不会做ts校验,如果需要校验,需要手动使用tsc --noEmit来校验语法但不输出,如果是在vue项目中,应该写:"build": "vue-tsc --noEmit && tsc --noEmit && vite build(记得先yarn add vue-tsc
请添加图片描述

VScode支持ts语法校验,所以就算你写错了,VScode会给你标出来,可以不用

二、isolatedModules:

  1. vite提供的ts编译只针对单文件的语法编译,而ts是可以关联不同文件之间的模块信息,比如a文件export了一个类型,在b文件import了这个类型是可以直接用的,但是vite编译ts的时候不会读其他文件的相关信息,就会导致一些ts的功能无法使用。在tsconfig.js中配置:"isolatedModules": true用于告诉ts当前环境不支持模块间关联的类型校验的,在开发时就会得到vite编译时的错误提醒
    请添加图片描述
  2. ts中,对于const enum会在使用时直接替换成常量,也就是说,编译出来的js中,第10行代码应为:age: 0,而对于vite的esbuild提供ts语法编译,他不认识const enum这种语法,编译时会直接去掉,也就是说,编译出来的js中,第3-6行代码直接没有了,但是第10行还在使用,所以第10行会报错。配置了"isolatedModules": true,在开发时就会得到vite编译时的错误提醒
    请添加图片描述
  3. 文件必须有模块相关的代码:配置了"isolatedModules": true后,ts强制要求我们在每个文件中做export或import

三、client types:

  1. vite提供了很多内置对象,内置对象又有很多作用,比如可以通过import.meta.来引用环境变量等,这就需要ts认识meta类型, 在tsconfig.js中配置:"types": ["vite/client"]即可使用vite的内置对象
    请添加图片描述
    在ts中使用:
    请添加图片描述
  2. ts不认识png文件,配置了"types": ["vite/client"]之后,ts知道这是png文件,也知道import pngUrl from "./assets/logo.png"返回的是个字符串,在项目中可以直接使用

vite中处理静态资源的方法

一、直接使用import导入,然后使用
请添加图片描述
二、vite提供了几个参数让我们更方便的引入文件:

  1. url:把文件放在某个地方,然后返回个url
    请添加图片描述
    用法:在引入的文件后面加?url
    输出:/src/test.ts
  2. raw:返回图片的字符串内容
    用法:在引入的文件后面加?raw
    输出:把文件的内容作为字符串输出
    请添加图片描述
  3. worker/worker inline:用于web worker(帮助我们更高性能的构建应用的工具),javascript是单线程的,如果将计算量很大的代码和javascript渲染进程放在一起,可能会阻塞渲染,导致页面卡顿,如果有个新的线程来处理这些计算的任务,那么在计算的同时,也不影响页面的渲染,web worker就是用来做这个事
    请添加图片描述
    用法:在引入的文件后面加?worker
    worker.js里存放的就是计算量很大的代码,web worker与主线程通过onmessage通信

三、json:

  1. 引入json直接用:
import pkg from "../package.json"
console.log(pkg)// 输出json文件的内容
  1. 引入json的部分内容:
import {version} from "../package.json"
console.log(version)// 输出version的值 0.0.0

四、web assembly:在浏览器中可运行的二进制的内容,在vite中也可以直接import然后后使用,省去了注册、转换、引入等步骤

import init from "./fib.wasm"
init().then((m) => {
	console.log(m.fib(10))
})

vite集成eslint和prettier

一、eslint规范代码的书写习惯,prettier自动做格式化
二、eslint

  1. 安装:yarn add eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D
  2. 在根目录下新建eslint的配置文件.eslintrc.js,在其中声明使用什么规则:
module.exports = {
	extends:"standard"
}

如果写的代码不符合规则(比如standard要求使用’'),在开发时就会给你报错,prettier可以帮助我们将规则自动使用到代码中,在保存时就进行格式化
三、prettier

  1. 在vscode中安装prettier插件,并配置在什么时候执行format
    请添加图片描述
  2. 在根目录下新建prettier的配置文件.prettiertrc.js,在里面声明格式化的内容
{
	"semi":false,// 不需要分号
	"singleQuote":true// 使用单引号
}
  1. 点击vscode的code——setting,搜索format on save,打开保存时格式化
    请添加图片描述
  2. 继续搜索formatter,选择默认使用prettier格式化
    请添加图片描述
    四、在package.js中的script中新增"lint": "eslint --ext js src/",以后执行命令npm run lint就可以验证src下所有的代码是否符合eslint的规则
    五、当eslint和prettier冲突时,可以关掉eslint的某项规则,在eslint的配置文件.eslintrc.js中:
module.exports = {
	extends:"standard",
	rules:{
		'space-before-function-paren': 'off'// 关掉这个规则
	}
}

六、先执行eslint检查再打包文件,在package.js中的script中build值的开头新增"buile": "npm run lint && "
七、执行git commit或者git push之前执行eslint检查,检查不通过则不允许提交,使用husky工具:

  1. yarn add husky -D
  2. npx husky install
  3. npx husky add .husky/precommit "npm run lint":在执行commit之前执行npm run lint

vite中的env环境变量

一、通过import.meta.env可查看vite默认存在4个环境变量:

  1. MODE:指明现在处于的模式,一般用他来对不同环境进行区分,比如dev,test
  2. BASE_URL:请求静态资源初始的URL,比如本地调试的localhost:3000,在线上可能是某个具体的域名
  3. PROD:当前环境是否是正式环境
  4. DEV:当前环境是否是dev,与prod互斥
  5. SSR:是否是服务端渲染的环境

二、production replacement:正式环境不能通过import.meta.env获取对象,如果PROD为true,那么编译后的文件import.meta.env会被替换为一个值,比如import.meta.env.MODE会被编译为"production"一个字符串值
三、自定义env:在src文件夹下新建.env文件,来声明一些自定义env:

VITE_TITLE=HELLO

使用:import.meta.env.VITE_TITLE,在import.meta.env也可以看到有这个VITE_TITLE
四、vite中有一个环境变量的工具,他会读各种不同的变量,然后将其放在环境变量里面,他还会根据文件名来区分不同的环境变量,比如在src文件夹下新建.env.development文件:

VITE_aaa=xxx

.env根据不同环境有不同的后缀,开发环境会用到.development文件,即运行npm run dev时会自动读取.env.development文件
五、mode:在指令中可以通过–mode xxx来指定当前环境
请添加图片描述
他会自动读取.env.test文件的内容
六、在使用自定义的env时,发现类型和vite内置的不一致,并且在写代码时,不会给我们提示,可以在vite-env.d.ts中做如下声明:
请添加图片描述

vite的高级应用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521413.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springcloud第4季 springcloud-gateway网关的功能作用

一 网关 1.1 gateway的作用 网关可以实现&#xff1a; 权限过滤拦截&#xff0c;请求转发&#xff1b;组包拆包&#xff0c;加密解密&#xff0c;报文解析&#xff0c;协议转换等功能。 cloud gateway本身也是一个微服务&#xff0c;需要注册进服务到注册中心&#xff0c;从…

LeetCode 378 有序矩阵中第K小的元素

题目信息 LeetoCode地址: . - 力扣&#xff08;LeetCode&#xff09; 题解内容大量转载于&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目理解 题意很直观&#xff0c;就是求二维矩阵中所有元素排序后第k小的数。 最小堆写法 该写法不再赘述&#xff0c;维护…

simulink的硬件支持下,串口发送的模型,stm32f407的串口程序调试错误

串口调试助手能接收到数据&#xff0c;为何是8个数据&#xff1f;如之奈何&#xff1f; 参考文章&#xff1a; STM32CubeMxMATLAB Simulink串口输出实验_用stm32cubemx生成的串口都是输出-CSDN博客根据 该文章发送字符串 hello&#xff0c;发送数量为5&#xff0c;接收也是he…

解读命令:icacls “E:\ShareAll“ /grant “Everyone:(OI)(CI)(F)“

命令 icacls "E:\ShareAll" /grant "Everyone:(OI)(CI)(F)" 是在Windows操作系统中用来修改文件或目录权限的命令行操作。该命令执行以下操作&#xff1a; 路径&#xff1a;"E:\ShareAll" 指定了要更改权限的目录位置&#xff0c;即对E盘下的“S…

Cisco Packet Tracer配置AAA认证

出口路由器R1配置&#xff1a; ip domain-name cisco.com;写入设备的默认域名 crypto key generate rsa;产生rsa密钥 ip ssh secret cisco;启用ssh服务 enable secret cisco;设置特权模式密码 连接TACAS的路由器做同样配置 RADIUS服务器的配置 client ip 配置成RADIUS服务器…

二分法题集2

目录 1 山脉数组的峰顶索引 分析&#xff1a; 代码展示&#xff1a; 2 寻找峰值 分析&#xff1a; 代码展示&#xff1a; 3 寻找旋转排序数组中的最小值 分析&#xff1a; 代码展示&#xff1a; 4 点名 分析&#xff1a; 代码展示&#xff1a; 1 山脉数组的峰顶…

数据结构学习——栈和队列

1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 …

《BERT》论文笔记

原文链接&#xff1a; [1810.04805] BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding (arxiv.org) 原文笔记&#xff1a; What&#xff1a; BETR&#xff1a;Pre-training of Deep Bidirectional Transformers for Language Understand…

Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器

http://www.your-server.com/ 这是一级目录&#xff0c;由于项目多&#xff0c;一般会通过二级域名http://oa.your-server.com/或二级目录http://www.your-server.com/oa来发布&#xff0c;本篇记录一下二级目录发布。先看效果 1、router/index.js配置base export default new …

对代理模式的理解

目录 一、前言二、案例1 代码2 自定义代理类【静态代理】2.1 一个接口多个实现&#xff0c;到底注入哪个依赖呢&#xff1f;2.1.1 Primary注解2.1.2 Resource注解&#xff08;指定name属性&#xff09;2.1.3 Qualifier注解 2.2 面向接口编程2.3 如果没接口咋办呢&#xff1f;2.…

算法基础课-搜索与图论

DFS 题目链接&#xff1a;842. 排列数字 - AcWing题库 思路&#xff1a;写的很好的题解AcWing 842. 排列数字--深度优先遍历代码注释 - AcWing #include<bits/stdc.h>using namespace std; int n; int st[10]; vector<int> a; void dfs(){if(a.size() n){for(in…

python标准数据类型--集合常用方法

在Python中&#xff0c;集合&#xff08;Set&#xff09;是一种无序且不重复的数据结构&#xff0c;它是由一个无序的、不重复的元素组成的。Python中的集合与数学中的集合概念相似&#xff0c;并且支持一系列常用的方法。本篇博客将深入介绍Python集合的常用方法&#xff0c;帮…

c# wpf XmlDataProvider 简单试验

1.概要 2.代码 <Window x:Class"WpfApp2.Window12"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend…

【C++初阶】String在OJ中的使用(一):仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加

前言&#xff1a; &#x1f3af;个人博客&#xff1a;Dream_Chaser &#x1f388;博客专栏&#xff1a;C &#x1f4da;本篇内容&#xff1a;仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加 目录 917.仅仅反转字母 题目描述&am…

C#操作MySQL从入门到精通(5)——查询数据

前言 在和MySql数据库交互的过程中,查询数据是使用最频繁的操作,本文详细介绍了查询数据的各种操作,包括查询一列数据、 查询两列数据、查询所有列数据、查询不重复的数据、查询指定行数据,绝对是C#操作MySql数据库史上最详细教程,能够帮助小白快速入门以及将这些功能迅速…

【数据结构】考研真题攻克与重点知识点剖析 - 第 3 篇:栈、队列和数组

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…

阿里云2核2G和2核4G轻量应用服务器优惠价格表,2024年最新报价

阿里云轻量应用服务器2核2G和2核4G配置优惠价格表&#xff0c;轻量2核2G3M带宽61元一年&#xff0c;轻量2核4G4M带宽165元1年&#xff0c;均不限制月流量&#xff0c;阿里云活动链接 aliyunfuwuqi.com/go/aliyun 活动打开如下图&#xff1a; 阿里云轻量应用服务器价格 61元/年…

上位机图像处理和嵌入式模块部署(qmacvisual实时视频)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们测试和练习的时候&#xff0c;大部分情况下都是利用图像进行测试的&#xff0c;但是实际情况下&#xff0c;或者准确一点说&#xff0c;工…

android 制作登录页

项目需要可以直接copy layout.xml <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"…

【六 (2)机器学习-EDA探索性数据分析模板】

目录 文章导航一、EDA&#xff1a;二、导入类库三、导入数据四、查看数据类型和缺失情况五、确认目标变量和ID六、查看目标变量分布情况七、特征变量按照数据类型分成定量变量和定性变量八、查看定量变量分布情况九、查看定量变量的离散程度十、查看定量变量与目标变量关系十一…