Vite 4.4 正式版发布，全面拥抱 Lightning CSS

已于 2023-07-25 18:45:24 修改
阅读量747 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
于 2023-07-24 13:45:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangzhihong8/article/details/131894508
版权

一、什么是 Vite

Vite 是由 Evan You 推出的下一代前端构建工具，是官方 Vue CLI 的替代品，速度非常快。Vite 利用原生 ESM 并使用 Rollup 处理开发和打包工作。 从功能上讲，它的工作方式类似于预配置的 webpack 和 webpack-dev-server，但在速度方面具有无可比拟的优势。
在这里插入图片描述

相比其他的构建工具，Vite 具有以下优点和特征：

  • 强大的 HMR 支持：Vite 提供了一个 HMR API， 在应用程序运行时交换、添加或删除模块，无需完全重新加载，显著加快开发过程。
  • 开箱即用的Typescript支持： Vite 使用名为 esbuild 的JavaScript 打包器将 TypeScript 代码转换为 JavaScript。
  • Vite 在提供的所有 JavaScript 文件中检测类裸模块导入，并将它们重写为解析路径以反映包在 node_modules 文件夹中的位置，以便浏览器可以正确处理它们。
  • 开箱即用地支持 Vue3 单文件组件 、Vue 3 JSX 组件和 Vue 2 组件，还支持 JSX 文件（.jsx、.tsx）、CSS 文件导入、PostCSS、CSS 模块和 CSS 预处理器，如 Sass、LESS 和 Stylus。

目前，Vite已经发布了4.4的正式版本，下面就来看看4.4发布的新功能吧！

二、Lightning CSS支持

了解本专栏 订阅专栏 解锁全文 超级会员免费看
xiangzhihong8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vite 5.0 新版本发布，看看有啥新变化？
前端达人
11-19 3022
参考来源：https://vitejs.dev/blog/announcing-vite5?ref=dailydevVite 5.0版本的发布标志着Vite生态系统的又一次重大进步。自Vite 4发布近一年以来，它作为生态系统的坚实基础，每周的npm下载量从250万跃升至750万次。各种框架持续创新，像Astro、Nuxt、SvelteKit、Solid Start、Qwik City等不断加入，...
tailwind-boilerplate:尾风CSS + Vite样板
03-12
设置基于tailwind css的项目需要安装tailwindcss npm软件包，postcss和autoprefixer-它还需要配置tailwind.config.js和postcss.config.js（可选，如果您打算使用postcss）然后手动配置这些文件。 最后，为了通过摇...
vite-plugin-linaria
05-03
Vite-plugin-linaria 使用Vite虚拟文件进行开发的linaria Vite插件 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-linaria -D 或者 npm i vite-plugin-linaria -D 用法 在vite.config中添加插件 // vite.config.js import VitePluginLinaria from 'vite-plugin-linaria' export default { plugins : [ // other plugins VitePluginLinaria ( ) ] , } 执照 麻省理工学院
Vue 3 + TypeScript + Vite 2024年4月最新管理系统基建
最新发布
tangkebo的博客
04-23 839
使用最新 vue3.4，elementplus2.7，vite5.2，eslint9.0，unocss搭建
Vite 4.3 正式发布，极致的性能优化！
程序员成长指北
10-08 110
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言大家好，我是考拉????Vite 4.3 正式发布！彼时彼刻，Vite 以其极致的项目启动速度和 HMR 速度，在前端工具链领域一骑绝尘无人能敌，后来，挑战者出现了，它就是由 webpack 创始人联合开发的 Turbopack，基于 Rust，号称比 Vite 快 10X！此时此刻，Vite 要拿...
Vite 3.0 正式发布，下一代前端工具链！
油墨香^-^的博客
07-19 2227
以供其他插件使用。
创建一个指定版本的 Vite 项目
壹九九伍博客
09-05 1555
命令创建项目时，如果未指定版本号，则会安装最新版本的 Vite。如果你希望使用不同的 Vite 版本，需要显式地指定版本号。的新目录，并在其中初始化一个 Vite 项目。Vite 会自动安装指定版本的相关依赖项并生成默认的项目结构和配置文件。是要安装的 Vite 版本。要创建一个指定版本的 Vite 项目，请使用。
Vue3 + Ts + Vite + pnpm 模版
06-02
Vite + Vue3 + Ts + router + Vuex + axios + eslint 、prettier、stylelint、husky、gitCommit 1：模版为博客中所描述所有代码，运行即用，需要注意，一定要下载博文中的依赖才可以启动 2：项目集成多种插件，打造...
tailwindcss+vue3+vite+preline
04-09
项目简介：该项目基于Vue3、Vite、Tailwind CSS与preline构建，是一个现代化的前端开发环境配置方案。1. Vue3: Vue.js 的最新主要版本，引入了许多新特性如Composition API、Teleport、Fragments等，为开发者提供了...
vite-wind:基于Vite和Tailwindcss 2的Vue 3样板启动器
05-28
如果您喜欢它，请留下星星以表示支持演示版用法通过运行克隆此项目 git clone https://github.com/boussadjra/vite-wind.git项目设置 npm install编译和热重装以进行开发 npm run dev编译并最小化生产 npm run ...
vite-ts-tailwind-starter:自以为是的Vite + Vue 3 + TypeScript + Tailwind CSS入门
05-01
Vite打字稿+尾风启动器 Vite的简单，自觉且可用于生产的项目模板。 有关最新更改，请参见 。 特征 Vue 3 Vuex 4商店（完全键入） 打字稿 带有JIT编译器的Tailwind CSS +已预安装以下插件 @tailwindcss/aspect-...
Vite上的Windi CSS vs Tailwind CSS JIT-Vue.js开发
05-27
Vite上的Windi CSS vs Tailwind CSS JIT Vite上的Windi CSS vs Tailwind CSS JIT纱线开发人员启动了两个服务器http：// localhost：3100 /-Windi CSS http：// localhost：3200 /-Tailwind CSS JIT编辑App.vue将触发...
Vite的Windi CSS又名按需Tailwind CSS-JavaScript开发
05-26
Vite aka按需Tailwind CSS的Windi CSS vite-plugin-windicss Vite aka随需Tailwind CSS的Windi CSS:high_voltage:查看与Tailwind功能的速度比较:high_voltage:它的速度很快-比Vite上Tailwind快20〜100倍:puzzle_...
vite白皮书中文版.pdf
05-28
VITE白皮书
vite-plugin-css-modules:vitejs css modules 名称自动转化插件
05-05
@zebing/vite-plugin-css-modules@zebing/vite-plugin-css-modules 是一个vue css modules智能转化插件。让你在使用vue css modules的同时，无需通过:class="$style.cssname", class={styles.cssname}等繁琐的方式...
基于Vite和TypeScript的单人推箱子游戏设计源码
04-15
基于Vite和TypeScript的单人推箱子游戏设计源码，该项目包含58个文件，主要文件类型有21个png图像文件，14个TypeScript源文件，11个Vue前端文件，5个json配置文件，以及2个CSS样式文件。此外，还包括1个gitignore...
Vite 4.4实验性地支持Lightning CSS,Lightning CSS更快的CSS处理利器
linwu的博客
07-07 470
Lightning CSS简单理解就是Rust版本的PostCSS,然后 Lightning CSS内置了一些功能，比如 CSS压缩，语法降级，语法支持前缀，CSS模块化功能。
Vite 5.0 正式发布，大幅度提升构建性能
QD_ANJING的博客
11-17 655
11 月 16 日，Vite 5.0 正式发布，这是 Vite 道路上的又一个重要里程碑！Vite 现在使用 Rollup 4，这已经代表了构建性能的大幅提升。此外，还有一些新的选项可以改善开发服务器性能。Vite 4 发布于近一年前，它为生态系统奠定了坚实的基础。随着项目继续在共享基础设施上构建，每周 npm 下载量从 250 万跃升至 750 万。框架不断创新，除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等，还看到新的框架加入并使生态系统更加强大。
不同的vite命令建vue，是不同的vite版本，一个是vite1，一个是vite2.0
weixin_40945354的博客
03-11 3996
npm init vite-app daily-cost 这个1，是培训的，写教程的时候vite还没更新，过年前的教程，过年了，就升2.0了。 npm init @vitejs/app 这个是2.0，是官网的
vite实现css module
06-02
Vite 是一个非常快速的前端构建工具，它内置了对 CSS 的支持，包括 CSS 模块化。下面是在 Vite 中实现 CSS 模块化的步骤： 1. 安装依赖 首先，您需要安装 `sass` 和 `sass-loader` 依赖项，它们将帮助您在 Vite 中使用 CSS 模块化。 ``` npm install sass sass-loader --save-dev ``` 2. 配置 `vite.config.js` 在 `vite.config.js` 中，您需要配置 `css` 属性来启用 CSS 模块化和 `sass` 预处理器。例如： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], css: { modules: { localsConvention: 'camelCaseOnly' }, preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` } } } }) ``` 在上面的示例中，`css.modules` 属性启用了 CSS 模块化，并将类名转换为 CamelCase 格式。`preprocessorOptions.scss` 属性启用了 `sass` 预处理器，并将全局变量文件导入到所有样式文件中。 3. 创建样式文件 在您的样式文件中，您可以使用 `:local()` 选择器来定义局部样式。例如： ``` .container { padding: 10px; background-color: white; border-radius: 5px; :local(.title) { font-size: 18px; color: #333; } :local(.description) { font-size: 14px; color: #666; } } ``` 在上面的示例中，`:local()` 选择器定义了 `.title` 和 `.description` 类的局部样式。 4. 在组件中使用样式 在您的组件中，您可以像这样导入样式文件： ``` <template> <div class="container"> <h2 class="title">Title</h2> <p class="description">Description</p> </div> </template> <style module> @import "@/styles/your-styles.scss"; </style> ``` 在上面的示例中，`<style module>` 标签启用了 CSS 模块化，并导入了样式文件。然后，您可以像这样在组件中使用局部类名：`.title` 和 `.description`。 这就是在 Vite 中实现 CSS 模块化的基本步骤。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiangzhihong8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值