Vite基本使用

最新推荐文章于 2024-04-15 11:20:35 发布
最新推荐文章于 2024-04-15 11:20:35 发布
阅读量670 收藏 2
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengxuyuan3629/article/details/127350136
版权

  vite是什么？

        Vite 是一个轻量级的、速度极快的前端构建工具，对 Vue SFC 提供第一优先级支持；类似于webpack；

  vite的作用：                    

           将ES6、TypeScript、Vue文件等浏览器不能识别的代码编译成浏览器可识别且可以正常运行的程序；
vite的构成：
        
        
        由两部分组成：
                一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
                一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；
vite现状：
最低0.47元/天 解锁文章
程序媛3629
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3vite基本脚手架
06-01
vue3vite基本脚手架
什么是Vite：现代和超快速项目工具指南---下一代前端工具
南北极之间
07-06 3309
Vite 是一款用于脚手架和捆绑项目的现代、超快速工具，由于近乎即时的代码编译和快速的热模块更换，它迅速变得流行起来。在本文中，您将了解Vite是什么以及如何使用它来构建新项目，等等。今天创建新项目的方式与我们多年前创建项目的方式大不相同。过去，通常的方法是创建一个文件夹，然后从创建一堆HTML，CSS和JS文件开始。使用FTP客户端手动部署项目，文件按原样上传，无需任何处理和优化，如缩小或压缩。多年来，事情发生了变化，因为现在我们有很多令人惊叹的工具，如Babel和webpack，使我们作为开发人员的生活
vite的基本使用
热门推荐
酷爱前端的小陈博客
05-15 1万+
1. 创建 vite 的项目 按照顺序执行如下的命令，即可基于vite 创建vue 3.x 的工程化项目： 2.梳理项目的结构 使用vite 创建的项目结构如下： 其中： node_modules 目录用来存放第三方依赖包 public 是公共的静态资源目录 src 是项目的源代码目录（程序员写的所有代码都要放在此目录下） .gitignore 是 Git 的忽略文件 index.html 是 SPA 单页面应用程序中唯一的HTML 页面 package.json 是项目..
vite用法大全，看这一篇就够了
最新发布
脑洞行者的博客
04-15 957
打包分析插件打包后，会在根目录下生成一个stats.html文件，用浏览器打开后，如下图：通过监听文件修改，自动重启 vite 服务最常用的场景就是监听 vite.config.js 和 .env.development 文件，我们知道，修改 vite 配置文件和环境配置文件，是需要重启 vite 才会生效，通过这个插件，我们将从反复重启中解脱出来安装配置：vite.config.ts组件自动按需导入。
webpack与 vite 的区别
qq_41189996的博客
04-15 5066
原文:https://blog.csdn.net/qq_41499782/article/details/109593388 webpack原理图 vite 原理图 区别 webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显 由于现代浏.
什么是vite 以及为什么要使用vite(即vite的优点)？
qq_69282350的博客
11-17 5714
vite 初了解
vite是干嘛的？
我是一只蘑菇17的博客
03-01 2011
欢迎访问我的个人博客：https://www.gaoyuan.ink，一起共勉学习～ 作为刚刚开始学习vue3，接触到了vite这个名词。还是在vue2和vue3的迁移构建版本中看到了这个词，当时看到Vue 2 应用升级为 Vue 3 (存在限制)中看到Vue 3 不再提供...
vite和webpack的区别和作用
qq_44552416的博客
01-17 1368
Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。
如何使用vite-svg-loader
02-23
下面是使用 Vite-SVG-Loader 的基本步骤： 1. 安装 Vite-SVG-Loader 插件 首先，需要使用 npm 或 yarn 将 Vite-SVG-Loader 插件安装到项目中。命令如下： ``` npm install vite-svg-loader --save-dev ``` 2. 配置...
vite-tailwind-template:使用Vite作为构建工具快速制作顺风设计原​​型
05-21
使用Airbnb基本配置 检查棉绒错误 yarn lint 检查并自动修复棉绒错误 yarn lint:fix 更漂亮 与eslint-plugin-prettier eslint-config-prettier和eslint-config-prettier prettier的eslint-plugin-prettier结合使用...
vite：:high_voltage:使用Nuxt 2的Vite体验:test_tube:
03-04
在开发中使用Vite 基本服务器端渲染 基本的热模块替换 Nuxt Nuxt Vuex商店 页面 基本 （将h作为第一个参数传递） 模块： 合成API 我们正在尝试使大多数模块和选项开箱即用。 如果您是模块
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
该模板提供了一个简单的示例，展示了如何在Vue3应用程序中使用Cesium.js API创建一个基本的地球场景，并实现了一些基本的交互功能。除此之外，该模板还提供了一些常用的依赖和插件，如axios、element-plus、vuex等，...
深入了解 Vite：快速、简洁、高效的前端构建工具（下）
你若盛开，清风自来
01-04 1283
Vite 插件是一种用于扩展 Vite 功能的机制。处理文件：在构建过程中对特定类型的文件进行处理，例如 CSS 预处理、图像优化等。注入代码：在生成的输出文件中注入额外的代码，例如添加版权声明、注入环境变量等。自定义构建步骤：执行自定义的构建步骤，例如运行测试、生成文档等。使用 Vite 插件非常简单，只需在项目的文件中添加插件的配置即可。例如，要使用一个名为});在上面的代码中，myPlugin是插件的导出函数，调用它并传入可选的配置参数即可使用该插件。
Vue3 更高效的构建工具——Vite
程序员柒的博客
02-10 1万+
本文讲解了构建工具 Vite，目前只有vue3才可以使用Vite，如果本文对你有所帮助请三连支持博主。下面案例可供参考Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。
关于vue3为何要使用Vite，什么是vite
huangzhixin1996的博客
07-23 1867
vite是新一代前端构建工具，能够显著提升前端开发体验。他是使用rollup打包你的代码，是开箱即用的，同时也提供了丰富的插件api,带来了高度的可扩展性。可以构建vue，react 等项目。
Vite 使用学习指南
qq_34185872的博客
05-29 2578
支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。
Vite 使用教程,极快的构建工具,使用入门,
启明星的指引---博客
03-18 6994
Vite使用入门 Vite是取代webpack的极速构建工具 文章目录Vite使用入门前言一、Vite是什么？二、使用步骤1.使用npm2.安装依赖3.运行测试服务器4.快!快!快!快!快!总结 前言 在浏览器支持 ES 模块之前，开发者没有以模块化的方式开发 JavaScript 的原生机制。这也是 “打包” 这个概念出现的原因,这里的打包就是指webpack这类构建工具, 但是,随着webpack打包的项目越来越大,每次打包所需要的时间也越来越长,即使有着热更新的方式,webpack一般也需要1秒
vite是什么
0
02-21 1709
因此，针对开发环境中的启动慢问题，Vite开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用esbuild来进行预构建。而Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。经过1.3节，我们简单对比了各打包工具之间的差异。
vite 项目中使用unocss
05-26
在 Vite 项目中使用 unocss，你需要先安装并配置 unocss 和 unocss/vite 插件。 1. 首先安装 unocss 和 unocss/vite 插件： ```bash npm install unocss unocss/vite --save-dev ``` 2. 在 Vite 配置文件中添加 unocss 插件： ```javascript // vite.config.js import unocss from 'unocss/vite' export default { plugins: [ unocss({ // unocss 配置选项 }) ] } ``` 3. 在你的代码中使用 unocss 的样式： ```html <!-- index.html --> <div class="bg-blue-500 text-white p-4 rounded-lg">Hello, world!</div> ``` 4. 运行 Vite 开发服务器，unocss 插件会自动分析你的 HTML 代码并生成最小化的 CSS 样式表： ```bash npm run dev ``` 以上就是在 Vite 项目中使用 unocss 的基本流程。需要注意的是，unocss 基于你的 HTML 代码生成最小化的 CSS 样式表，因此在使用时需要编写语义化的 HTML 代码，以便 unocss 正确地解析样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值