Advertisement

Vite-Plugin-Css-MODULES: ViteJS CSS Modules 名称自动转换插件

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：None

简介：
Vite-Plugin-Css-MODULES是一款专为ViteJS设计的CSS Modules名称自动转换插件，旨在简化开发流程并提高代码可维护性。 @zebing/vite-plugin-css-modules 是一个用于 Vue CSS Modules 的智能转换插件。它允许你在使用 Vue CSS Modules 时无需通过 `:class=$style.cssname` 或 `class={styles.cssname}` 等复杂方式调用样式，而是可以直接使用简单的 `class=cssname` 方式来引用类名。这大大减少了工作量，并提高了开发效率。 该插件目前不支持 Vue2.0 版本，在 SSR 模式中仅支持自定义 class 名称的方式，如果同时存在自定义的 class 名称和普通 class 可能会导致错误。 如何使用： 1. 安装插件：`npm install @zebing/vite-plugin-css-modules --save-dev` 2. 在 `vite.config.js` 配置文件中加入配置 ```javascript import vite from vite; // 加入相关配置代码 ``` 请确保根据具体需求进行适当的配置调整。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • Vite-Plugin-Css-MODULES: ViteJS CSS Modules 名称自动转换插件
    优质
    Vite-Plugin-Css-MODULES是一款专为ViteJS设计的CSS Modules名称自动转换插件，旨在简化开发流程并提高代码可维护性。 @zebing/vite-plugin-css-modules 是一个用于 Vue CSS Modules 的智能转换插件。它允许你在使用 Vue CSS Modules 时无需通过 `:class=$style.cssname` 或 `class={styles.cssname}` 等复杂方式调用样式，而是可以直接使用简单的 `class=cssname` 方式来引用类名。这大大减少了工作量，并提高了开发效率。 该插件目前不支持 Vue2.0 版本，在 SSR 模式中仅支持自定义 class 名称的方式，如果同时存在自定义的 class 名称和普通 class 可能会导致错误。 如何使用： 1. 安装插件：`npm install @zebing/vite-plugin-css-modules --save-dev` 2. 在 `vite.config.js` 配置文件中加入配置 ```javascript import vite from vite; // 加入相关配置代码 ``` 请确保根据具体需求进行适当的配置调整。
     
  • Node Modules
    优质
    Node Modules是用于存放Node.js应用程序或模块所需的所有依赖包的文件夹。它包含运行和开发项目必需的各种库和框架。 由于您提供的博文链接未能直接显示具体内容或文字内容，我无法直接访问并提取需要改写的文本部分。请您提供具体的段落或者句子给我进行重写处理。 如果可以的话，请复制粘贴出具体的内容片段，这样我可以帮助你去掉联系方式和网址，并且按照您的要求不改变原意地重新组织这段话。
     
  • Vite插件vite-plugin-svgr：将SVG转为React组件
    优质
    vite-plugin-svgr是一款用于Vite项目的插件，它能够自动将SVG文件转换成易于使用的React函数式组件，简化开发流程。 vite-plugin-svgr 是一个 Vite 插件，用于将 SVG 文件转换为 React 组件。 **用法** 在 `vite.config.js` 中导入并使用该插件： ```javascript import svgr from vite-plugin-svgr; export default { ... plugins: [svgr()], } ``` 然后可以像这样导入 SVG 文件作为 React 组件： ```javascript import { ReactComponent as Logo } from ./logo.svg; ``` **许可证** 麻省理工学院许可。
     
  • Node Modules依赖文件
    优质
    Node Modules是Node.js项目中存放已安装npm包的目录，包含了项目的依赖文件和模块，用于管理JavaScript代码的外部库。 Node.js的依赖包可以直接下载后放到项目的node_modules文件夹下即可使用。
     
  • The Book of Apache Modules
    优质
    《Apache模块手册》是一本全面介绍Apache服务器核心组件和第三方模块的实用指南，帮助读者深入理解并优化网站性能。 一本介绍Apache服务器的好书。
     
  • Tailwind Scrollbar Plugin: 用于Tailwind CSS的滚动条插件
    优质
    Tailwind Scrollbar Plugin是一款专为Tailwind CSS设计的滚动条样式插件，它允许开发者轻松定制滚动条的颜色、宽度和其他视觉属性。 Tailwind CSS的滚动条插件可以为Firefox及基于Webkit的浏览器中的滚动条添加样式。 安装方法如下： ```shell yarn add -D tailwind-scrollbar ``` 或 ```shell npm install --save-dev tailwind-scrollbar ``` 然后，将其加入到你的Tailwind配置文件中plugins数组内。 ```javascript plugins: [ ... require(tailwind-scrollbar), ], ``` 使用方法说明：该插件用于设置滚动条样式，并不会强制显示。你需要通过标准的CSS技术来让内容溢出以触发滚动条。 对于每个需要进行样式的元素，你可以添加.scrollbar或.scrollbar-thin类。接着，可以附加任何所需的scrollbar-track-{color}、scrollbar-thumb-{color}或者hover:等属性来进行进一步的样式定制。
     
  • vite-plugin-components：Vite中自动导入按需组件的V插件
    优质
    vite-plugin-components是一款专为Vite设计的插件，它能够智能地在项目中自动导入并使用按需加载的Vue组件，极大提升了开发效率和代码管理的便捷性。 vite-plugin-components 按需组件自动导入Vite用法：从v0.6.x版本开始支持Vite 2，并且v0.6.x也兼容Vite 1。 安装： ``` npm i vite-plugin-components -D # 或者使用 yarn 安装: yarn add vite-plugin-components -D ``` 配置文件(vite.config.js)添加插件： ```javascript // vite.config.js import Vue from @vitejs/plugin-vue; import ViteComponents from vite-plugin-component; export default { plugins: [ Vue(), ViteComponents() ] } ``` 安装完成后，可以直接在模板中使用组件而无需手动导入和注册。
     
  • Vite-Plugin-Vue2：适用于Vite的Vue2插件
    优质
    Vite-Plugin-Vue2是一款专为Vite构建工具设计的插件，旨在支持Vue2项目开发。它提供了快速的冷启动和热更新功能，优化了开发体验，使得使用Vue2进行前端应用开发变得更加高效便捷。 要使用vite-plugin-vue2，请运行`yarn add vite-plugin-vue2 --dev`以将插件添加到项目中，并在`vite.config.js`文件里进行如下配置： ```javascript const { createVuePlugin } = require(vite-plugin-vue2); module.exports = { plugins: [ createVuePlugin(/*options*/) ] } ``` 关于参数选项： - `vueTemplateOptions`: 类型为 Object，默认值为 null。用于自定义 Vue 模板编译器的配置。 - `jsx`: 类型 Boolean， 默认值 false。是否开启 JSX 转换功能。 - `jsxOptions`: 类型 Object， 用于指定 JSX 转换的相关选项。
     
  • Vite-Plugin-Windicss：为Vite打造的Windicss插件
    优质
    Vite-Plugin-Windicss是一款专为Vite项目设计的Windicss插件，旨在加速Windicss在开发环境中的应用与编译速度。 vite-plugin-windicss Vite的按需TailwindCSS插件 特性： - 快速：比使用Vite的其他Tailwind CSS解决方案快15到20倍。 - 按需CSS实用程序（兼容Tailwind CSS v2）。 - 按需本地元素样式重置 - 热模块更换（HMR） - 从tailwind.config.js加载配置文件 - 与框架无关：适用于Vue，React，Svelte和Vanilla等各类项目。 - 转换CSS @apply 和 @screen指令（包括用于Vue SFC的< style >标签） 使用方法： 安装插件： ```shell npm i vite-plugin-windicss -D # 或者 yarn add vite-plugin-windicss -D ``` 将其添加到vite.config.js文件中： ```javascript import WindiCSS from vite-plugin-windi; export default { plugins: [WindiCSS()], } ```
     
  • Vite-Plugin-Md：适用于Vite的Markdown插件
    优质
    Vite-Plugin-Md是一款专为Vite框架设计的Markdown插件，旨在简化静态网站开发流程，支持快速预览和构建，助力开发者高效创作。 vite-plugin-md 降价促销 将Markdown用作Vue组件 在Markdown中使用Vue组件 Vite 2为0.2.x版本，Vite 1为0.1.x版本 安装步骤： ```bash npm i vite-plugin-md -D # 或者 yarn add vite-plugin-md -D ``` 将其添加到vite.config.js文件里： ```javascript import Vue from @vitejs/plugin-vue; import Markdown from vite-plugin-md; export default { plugins: [ Vue(), Markdown() ] } ```