在vue3中（vite）引入unocss，安装设置unocss

源代码 · 2024-9-15 05:22:43

媒介：不相识unocss的朋侪，发起先阅读此文章https://antfu.me/posts/reimagine-atomic-css-zh

简单来说，unocss是一个css引擎，用过Tailwind CSS和windi CSS的不会生疏，不一样的是，unocss自己不提供任何类名css，它只是办理Tailwind以及windi的编译和打包的某些题目，也就是它可以共同Tailwind大概windi使用，以提供更快的编译打包速率。
安装

unocss的github地点为https://github.com/unocss/unocss，本事强的朋侪可根据github文档举行安装。
npm i -D unocss大概yarn add unocss --dev在vite.config.ts（或vite.config.js）中，写入以下设置
import Unocss from 'unocss/vite'export default { plugins: [ Unocss(), ],}而后，在man.ts（main.js）中引入css
import 'uno.css'以上，就完成了unocss的安装，前面先容过，unocss只是一个引擎。它自己并不提供css快捷类支持，以是以上安装只是完成了引擎的设置。如今，我们必要安装下一个插件，以提供快捷类支持。(更正：unocss如今不必要手动设置preset-uno，只需安装unocss即可，unocss如今默认内置preset-uno，以下安装步调可跳过，直接看代码提示设置即可)
npm i -D @unocss/preset-uno大概yarn add @unocss/preset-uno --save而后，在vite.config.ts(vite.config.js)中设置
import Unocss from 'unocss/vite'import presetUno from '@unocss/preset-uno'export default { plugins: [ Unocss({ presets: [ presetUno() ] }), ],}注意这里的设置与上面的设置是合并关系，并非新建。unocss/preset-uno是一个插件支持包，导入它后，你可以在代码中使用Tailwind CSS、Windi CSS、Bootstrap、Tachyons等插件的快捷类。它们已经被完全兼容。也就是说，你可以使用上面例子中恣意一种快捷类风格举行编程。 unocss将共同preset-uno主动为你匹配。更多先容请参考https://github.com/unocss/unocss 标题为《预装》部门。
vscode代码提示设置

在vscode应用市场中搜索Unocss，大概点击https://marketplace.visualstudio.com/items?itemName=antfu.unocss举行安装此拓展。

安装完毕后，大概必要重新启动vscode，之后在html中就会为你提供快捷选项。
注意：preset-uno虽已包罗Tailwind CSS、Windi CSS、Bootstrap、Tachyons等风格类名，但类名风格发起以tailwindcss为准，由于windicss也是Tailwind的编译速率办理方案，它也完全依照Tailwind规则，以是我们完全可以以Tailwind为准举行使用。Taliwind文档：https://tailwindcss.com/docs/aspect-ratio
代码提示效果：

编译效果

更多使用方法内容请阅读文档。

在vue3中（vite）引入unocss，安装设置unocss

所属分类: 问答交流

新帖推荐: 30日

推荐作品