《三十一》开发模式构建工具 Vite

20的1小时59分

基于 Vite2。

在实际开发中，编写的代码往往是不能被浏览器直接识别的，例如 ES6+、React、Vue、TypeScript 等，必须通过构建工具来对代码进行转换、编译，例如 Webpack、Rolluop、Vite 等。

Vite：下一代前端开发与构建工具，能够显著地提升前端开发体验。

目前 Vite 虽然已经更新到 2.0，但是依然并不算非常的稳定，整个社区插件等支持也不够完善，大型项目使用 Vite 来进行构建的还比较少。

Vite 的构成：

Vite 主要由两部分构成：

  1. 一个开发服务器：基于原生的 ESModule 提供了丰富的內建功能，HMR 的速度非常快。
  2. 一套构建指令：本质上是在使用 Rollup 打包代码，可以打包输出优化过的静态资源。

安装 Vite：

npm install vite -D。

使用 Vite 开启本地服务：

  1. 新建 vite-demo 文件夹，并且运行 npm init -y 命令初始化项目。

  2. 新建 src/index.js 文件，并编写代码。

    console.log('index')

  3. 新建 index.html 文件，并编写代码。

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./src/index.js" type="module"></script>
</body>
</html>

  4. 安装 Vite：npm install vite -D。

  5. 运行 npx vite 命令，Vite 会将当前根目录下的 index.html 文件作为入口文件，开启一个本地服务器，并且支持热替换。

    Vite 开启本地服务会比 Webpack 快很多。

    请添加图片描述
    在这里插入图片描述

使用 Vite 处理 CSS 样式：

Vite 原生支持 CSS、CSS 预处理，还有 PostCSS 的转换，不需要额外做什么配置。

CSS：

  1. 新建 src/css/index.css 文件，并编写代码。
    body {background-color: red;
}
  2. 在 src/index.js 文件中将其引入。
    import './css/index.css'
console.log('index')
  3. 运行 npx vite 命令，会发现使用 Vite 进行的话，不需要针对 CSS 文件做什么配置，直接编译成功了，Vite 会创建一个 <style></style> 标签将 CSS 内联到 HTML 文件中。 在这里插入图片描述
    在这里插入图片描述

Less：

  1. 安装 Less：npm install less -D。
  2. 新建 src/css/index.less 文件，并编写代码。
    @bg: blue;
body {background-color: @bg;
}
  3. 在 src/index.js 文件中将其引入。
    import './css/index.less'
console.log('index')
  4. 运行 npx vite 命令，会发现使用 Vite 进行的话，不需要针对 Less 文件做什么配置，直接编译成功了。
    在这里插入图片描述

PostCSS：

  1. 安装 PostCSS 和 PostCSS 的预设：npm install postcss postcss-preset-env -D。
  2. 新建 postcss.config.js 文件，并编写配置信息。
    module.exports = {plugins: [require('postcss-preset-env')]
}
  3. 新建 src/css/index.css 文件，并编写代码。
    body {user-select: none;
}
  4. 在 src/index.js 文件中将其引入。
    import './css/index.css'
console.log('index')
  5. 运行 npx vite 命令，会发现使用 Vite 进行的话，不需要针对 PostCSS 做什么配置，PostCSS 就已经生效了。
    在这里插入图片描述

使用 Vite 处理 TypeScript 代码：

Vite 原生支持 TypeScript，不需要额外做什么配置。

  1. 新建 src/utils.ts 文件，并编写代码。
    export const dateFormat = (date: string) => {return `日期为：${date}`
}
  2. 在 src/index.js 中将其引入。
    import {dateFormat} from './utils/index.ts'
console.log(dateFormat('1999-10-10'))
  3. 运行 npx vite 命令，会发现编译成功了。
    在这里插入图片描述

使用 Vite 处理图片：

Vite 原生支持对图片的处理，不需要额外做什么配置。

  1. 在 src/images/ 文件夹下放入一张图片。
  2. 在 src/index.js 文件中将其引入。
    import likeImg from './images/like.jpg'
const img = document.createElement('img')
img.src = likeImg
document.body.appendChild(img)
  3. 运行 npx vite 命令，会发现编译成功了。
    在这里插入图片描述

使用 Vite 处理 Vue：

Vite 对 Vue 提供了第一优先级的之处：

  1. 对 Vue3 单文件组件的支持：@vitejs/plugin-vue。

  2. 对 Vue3 JSX 的支持：@vitejs/plugin-vue-jsx。

  3. 对 Vue2 的支持：vite-plugin-vue2。

  4. 安装 Vue2：npm install vue@2。

  5. 新建 src/js/App.vue 文件并编写代码。

    // src/js/App.vue
<template><div>{{title}}</div>
</template><script>export default {data() {return {title: 'Hello Vue'}}}
</script><style scoped></style>

  6. 新建 src/index.js 文件，并编写代码。

    // src/index.js
import Vue from 'vue'
import App from './js/App.vue'new Vue({render: h => h(App)
}).$mount('#app')

  7. 新建 index.html 文件，并编写代码。

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script src="./src/index.js" type="module"></script>
</body>
</html>

  8. 运行 npx vite 命令进行打包，会发现报错了，Vite 无法转换 Vue 文件。
    在这里插入图片描述

  9. 安装 vite-plugin-vue2 插件用来处理 Vue 文件：npm install vite-plugin-vue2 -D。

  10. 新建 vue.config.js 文件，并编写配置。

    import {createVuePlugin} from 'vite-plugin-vue2'export default {plugins: [createVuePlugin(),]
}

  11. 运行 npx vite 命令进行打包，会发现打包成功了。
    在这里插入图片描述

Vite 启动本地服务为什么快速？

  1. Vite 利用浏览器已经原生支持 ESModule，遇到 import 就发送一个 HTTP 请求去按需加载加载文件，而不需要加载整个项目。

  2. Vite 会启动一个 Connect 服务器拦截这些请求，动态生成转换后的 ESModule 代码返回给浏览器，而不需要提前解析依赖、打包构建后再启动开发服务器。

    Vite2 之前是使用 koa 来搭建服务器；Vite2 及之后是使用 Connect 来搭建服务器。
    Webpack 是先解析依赖、打包构建再启动开发服务器，因此启动时间更长。

    // src/utils/index.ts
export const dateFormat = (date: string) => {return `日期为：${date}`
}

    在这里插入图片描述

  3. 在首次启动 Vite 时，Vite 会预构建项目的第三方依赖。

    这么做的目的是：

    1. CommonJS 和 UMD 兼容性: 在开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将以 CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。
    2. 性能： Vite 将那些具有许多内部模块的 ESM 依赖项转换为单个模块。有些包将它们的 ES 模块构建为许多单独的文件，彼此导入，例如，lodash-es 有超过 600 个内置模块，当执行 import { debounce } from 'lodash-es' 时，浏览器会同时发出 600 多个 HTTP 请求，即使服务器能够轻松处理它们，但大量请求会导致浏览器端的网络拥塞，使页面加载变得明显缓慢，通过将 lodash-es 预构建成单个模块，现在我们只需要一个HTTP请求。

    在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker 资源控制

docker 资源控制

Docker的资源控制 对容器使用宿主机的资源进行限制&#xff0c;如cpu&#xff0c;内存&#xff0c;磁盘I/O Docker使用linux自带的功能cgroup(control grouos)是linux内核系统提供的一种可以限制&#xff0c;记录&#xff0c;隔离进程组使用的物理资源 Docker借助这个机制&…
阅读更多...
Python 小程序之动态进度条

Python 小程序之动态进度条

动态进度条 文章目录 动态进度条前言一、显示效果二、基本思路1.引入库2.基本参数3.数据处理 三、数据处理1.计算完成百分比2.动态显示进度条3.打印完成时间 总结 前言 大家在下载东西的时候都会看到有一个动态的进度条在那里。进度条走完了也就下载完了。下面我写一个简易版的…
阅读更多...
【音视频 | H.264】H.264编码详解

【音视频 | H.264】H.264编码详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…
阅读更多...
浅谈web性能测试

浅谈web性能测试

什么是性能测试&#xff1f; web性能应该注意些什么&#xff1f; 性能测试&#xff0c;简而言之就是模仿用户对一个系统进行大批量的操作&#xff0c;得出系统各项性能指标和性能瓶颈&#xff0c;并从中发现存在的问题&#xff0c;通过多方协助调优的过程。而web端的性能测试…
阅读更多...
大数据机器学习与深度学习——回归模型评估

大数据机器学习与深度学习——回归模型评估

大数据机器学习与深度学习——回归模型评估 回归模型的性能的评价指标主要有&#xff1a;MAE(平均绝对误差)、MSE(平均平方误差)、RMSE(平方根误差)、R2_score。但是当量纲不同时&#xff0c;RMSE、MAE、MSE难以衡量模型效果好坏&#xff0c;这就需要用到R2_score。 平均绝对…
阅读更多...
专业证件翻译哪里比较正规？

专业证件翻译哪里比较正规？

随着国际化的步伐不断加快&#xff0c;我们与国外的交流日益频繁&#xff0c;无论是出国留学、旅游还是商务活动&#xff0c;都离不开证件翻译。那么&#xff0c;在选择证件翻译服务时&#xff0c;我们应该注意哪些事项呢&#xff1f;哪里能找到正规的翻译服务呢&#xff1f; 我…
阅读更多...
Python之Requests库使用总结

Python之Requests库使用总结

概述 Requests是python中一个很Pythonic的HTTP库&#xff0c;用于构建HTTP请求与解析响应 Requests开发哲学 Beautiful is better than ugly.(美丽优于丑陋) Explicit is better than implicit.(直白优于含蓄) Simple is better than complex.(简单优于复杂) Complex is bett…
阅读更多...
winform使用CefSharp嵌入VUE网页并交互

winform使用CefSharp嵌入VUE网页并交互

1、NuGet添加CefSharp 如果下载慢或失败可以更新下载源 腾讯资源https://mirrors.cloud.tencent.com/nuget/华为资源https://repo.huaweicloud.com/repository/nuget/v3/index.json 2、将项目平台改为X64 3、在winform窗体添加cef using CefSharp; using CefSharp.WinForms; u…
阅读更多...
【ret2hbp】一道板子测试题 和 SCTF2023 - sycrpg

【ret2hbp】一道板子测试题 和 SCTF2023 - sycrpg

前言 ret2hbp 主要是利用在内核版本 v6.2.0 之前&#xff0c;cpu_entry_area mapping 区域没有参与随机化的利用。其主要针对的场景如下&#xff1a; 1&#xff09;存在任意地址读&#xff0c;泄漏内核地址 2&#xff09;存在无数次任意地址写&#xff0c;泄漏内核地址并提权…
阅读更多...
设计模式——观察者模式（Observer Pattern）

设计模式——观察者模式（Observer Pattern）

概述 观察者模式是使用频率最高的设计模式之一&#xff0c;它用于建立一种对象与对象之间的依赖关系&#xff0c;一个对象发生改变时将自动通知其他对象&#xff0c;其他对象将相应作出反应。在观察者模式中&#xff0c;发生改变的对象称为观察目标&#xff0c;而被通知的对象称…
阅读更多...
phpstudy搭建WordPress教程

phpstudy搭建WordPress教程

一、phpstudy新建配置WordPress 打开phpstudy&#xff0c;启动Apache&#xff08;或者Nginx&#xff09;和MySQL服务 来到数据库部分&#xff0c;点击[创建数据库]&#xff0c;填写新建数据库的名称&#xff0c;用户名以及密码&#xff0c;完成后点击确认 来到网站部分&#x…
阅读更多...
C++STL的stack和queue(超详解)

C++STL的stack和queue(超详解)

文章目录 前言stack栈的题目最小栈JZ31 栈的压入、弹出序列 stack的模拟实现queue的模拟实现 前言 栈和队列这一块其实有数据结构的基础&#xff0c;学起来非常简单。 stack 栈的成员函数就这么写&#xff0c;除了emplace其他都已经非常熟悉了。 stack没有迭代器吗&#xff…
阅读更多...
【Linux】锁的简单封装以及原理解析

【Linux】锁的简单封装以及原理解析

文章目录 一、锁的原理过程1&#xff1a;过程2过程3过程4 二、 锁的简单封装1.LockGuard.hpp2.使用1.正常锁的使用2.使用封装后的 总结 一、锁的原理 为了实现互斥锁操作,大多数体系结构都提供了swap或exchange指令,该指令的作用是把寄存器和内存单元的数据相交换,由于只有一条…
阅读更多...
锂电池基础知识及管理方式总结

锂电池基础知识及管理方式总结

这两天在排查一个锂电池无法充电的问题&#xff0c;用的是电池管理芯片BQ25713&#xff0c;网上相关的资料也很少&#xff0c;查看数据手册时&#xff0c;里面也有很多术语参数等不是很理解&#xff0c;所以&#xff0c;在此对锂电池的基础知识做个简单的总结&#xff0c;方面后…
阅读更多...
python自动化运维快速入门,python自动化运维教程

python自动化运维快速入门,python自动化运维教程

大家好&#xff0c;给大家分享一下python自动化运维需要掌握的技能&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 面向学员 熟练使用计算机&#xff0c;对Windows、Linux 有一点了解从业职或在校学生 对目前从事互联网运维&#xff0c;想…
阅读更多...
【MySQL】:表的约束（上）

【MySQL】:表的约束（上）

表的约束 一.非空约束二.default约束三.列描述四.zerofill五.主键1.单个主键2.复合主键 真正约束字段的是数据类型&#xff0c;但是数据类型约束很单一&#xff0c;需要有一些额外的约束&#xff0c;更好的保证数据的合法性&#xff0c;从业务逻辑角度保证数据的正确性。比如有…
阅读更多...
Kubernetes实战(九)-kubeadm安装k8s集群

Kubernetes实战(九)-kubeadm安装k8s集群

1 环境准备 1.1 主机信息 iphostname10.220.43.203master10.220.43.204node1 1.2 系统信息 $ cat /etc/redhat-release Alibaba Cloud Linux (Aliyun Linux) release 2.1903 LTS (Hunting Beagle) 2 部署准备 master/与slave主机均需要设置。 2.1 设置主机名 # master h…
阅读更多...
做题笔记：SQL Sever 方式做牛客SQL的题目--查询每天刷题通过数最多的前二名用户

做题笔记：SQL Sever 方式做牛客SQL的题目--查询每天刷题通过数最多的前二名用户

----查询每天刷题通过数最多的前二名用户id和刷题数 现有牛客刷题表questions_pass_record&#xff0c;请查询每天刷题通过数最多的前二名用户id和刷题数&#xff0c;输出按照日期升序排序&#xff0c;查询返回结果名称和顺序为&#xff1a; date|user_id|pass_count 表单创建…
阅读更多...
论文润色突显研究亮点 papergpt

论文润色突显研究亮点 papergpt

大家好&#xff0c;今天来聊聊论文润色突显研究亮点&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 标题&#xff1a;论文润色突显研究亮点――提升论文吸引力的关键步骤 一、引言 在学术研究中&#x…
阅读更多...
docker学习（八、mysql8.2主从复制遇到的问题）

docker学习（八、mysql8.2主从复制遇到的问题）

在我配置主从复制的时候&#xff0c;遇到了一直connecting的问题。 起初可能是我ip配置的不对&#xff0c;slave_io_running一直connecting。&#xff08;我的环境&#xff1a;windows中安装了wsl&#xff0c;是ubuntu环境的&#xff0c;在wsl中装了miniconda&#xff0c;mini…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023