首页 前端知识 unocss使用&问题记录

unocss使用&问题记录

2024-03-15 10:03:30 前端知识 前端哥 284 913 我要收藏

安利一下包管理器:ni,不同的前端项目构建有些是使用npm,pnpm,yarn等,ni包管理器可以统一使用体验,不在乎你使用的是什么,它会自动检测,然后执行对应的命令。然后npm add命令也可以正确执行哦,但是不推荐这样写~

干嘛用的看这里!!!
ni包管理器

1.安装与配置

  • 安装:npm install -D unocss
  • 在入口文件导入unocss和重置样式

//main.ts文件
//引入unocss编译的样式
import ‘uno.css’
//重置浏览器默认样式
import ‘@unocss/reset/tailwind.css’

  • 配置参考

请注意:安装完unocss(当前版本:v0.53.5)后,有些插件已经自带,例如preset和transformer,在安装unocss其他插件之前,可以检查看看已经安装没有。
在这里插入图片描述

//uno.config.ts文件
import { resolve } from 'path'
import {
    defineConfig,
    // 属性化模式,属性冲突时,可以通过默认un-前缀来解决:<div m-2 rounded text-teal-400 >代替class</div>
    presetAttributify,
    // 可以自定义图标转换
    presetIcons,
    presetTypography,
    // 预设,必须的
    presetUno,
    // 使用你自己的函数来获取字体来源
    presetWebFonts,
    // 有多少个别名,默认启用
    transformerDirectives,
    /**
     * 组合,方便书写
     * 前缀组合:class="hover:(bg-gray-400 font-medium) font-(light mono)"
     * class="hover:bg-gray-400 hover:font-medium font-light font-mono"
     */
        transformerVariantGroup,
} from 'unocss'
console.log('unocss.config.ts')
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
// 开发的时候检查样式:http://localhost:5173/__unocss

export default defineConfig({
    // 预设的别名,可以进行一些组合使用
    shortcuts: [
        ['center', 'flex items-center justify-center'],
        ['btn', 'px-2 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
        ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
    ],
    presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
            collections: {
            	//把自己的svg文件转换为class,这里的my-icon名称随便取,使用的时候通过i-my-icon-[filename]。
                'my-icon': FileSystemIconLoader(
                   './src/assets/svg',
                    svg => svg.replace(/#FFF/, 'currentColor'),
                ),
            },
            scale: 1.2,
            warn: true,
        }),
        presetTypography(),
        presetWebFonts({
            fonts: {
                sans: 'DM Sans',
                serif: 'DM Serif Display',
                mono: 'DM Mono',
            },
        }),
    ],
    transformers: [
        // 指令:@apply等
        transformerDirectives(),
        transformerVariantGroup(),
    ],
    safelist: 'prose m-auto text-left'.split(' '),
})

//vite.config.ts文件
import {defineConfig} from 'vite'
import UnoCSS from 'unocss/vite'

export default defineConfig({
    plugins: [
        //先执行这个,然后在执行unocss.config.ts。
        UnoCSS(),
    ],
})

2.svg文件转换为class

在unocss.config.ts中,通过import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders’来处理我们的svg文件,这里需要指定一个文件目录,我这边指定文件目录为src/assets/svg,把你的svg文件放在里面,它会帮我转换生成对应的class。

//unocss.config.ts文件,详细的配置参考上面的
presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
            collections: {
            	//把自己的svg文件转换为class,这里的my-icon名称随便取,使用的时候通过i-my-icon-[filename]。
                'my-icon': FileSystemIconLoader(
                   './src/assets/svg',
                    svg => svg.replace(/#FFF/, 'currentColor'),
                ),
            },
            scale: 1.2,
            warn: true,
        }),

这里我遇到个问题,svg文件有帮我们生成class,但是显示不出来。复制url里面的信息,直接浏览器打开,根据提示解决问题。
在这里插入图片描述
在这里插入图片描述
ok,提示我们width已经定义,我们进入到svg文件,删除所有的width与height信息。问题解决!

3.vue动态绑定值

可以参考这个图
在这里插入图片描述

4.如何给模板字符串进行提取编译

默认的话是不提取js、ts里面的class属性,我们需要自己去指定目录,这里推荐指定一个目录或多个目录,不要太多,不然扫描编译的文件太多了,比较耗时。官方文档

//unocss.config.ts
export default defineConfig({
    content:{
      pipeline:{
          include: [
              // the default
              /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
              // include js/ts files
              'src/*.{js,ts}',//不推荐
              'src/**/*.{js,ts}',//不推荐
              'src/views/*.{js,ts}',//推荐
          ],
      }
    },
})

5.unocss不适合团队开发?不利于维护?

通过使用transformerCompileClass插件,可以帮我们生产class类。与传统的做法一样,我们需要命名一个类名,但是省了一个步骤,那就是来回切换,因为我们可以直接在class中书写你的类名。这里需要注意是,这里必须要加一个前缀,默认的是:uno:,这个前缀可以通过配置修改。

//安装:npm install -D @unocss/transformer-compile-class

//unocss.config.ts
import transformerCompileClass from '@unocss/transformer-compile-class'
  transformers: [
    // 指令:@apply等
    transformerDirectives(),//非必须
    transformerCompileClass(),//必须,这个是编译class的,要放在这之前
    transformerVariantGroup(),//非必须
  ],

通过以上步骤,transformerCompileClass插件才会自动帮我们生成class类。官方文档参考
编译前:
在这里插入图片描述
http://localhost:5173/__unocss查看 编译后的css:
在这里插入图片描述

6.实现设计稿的尺寸,类似rpx

其他实现方式参考链接

除了以上方式,其实还有一个方式,我们可以直接使用postprocess来转换默认单位大小

//vite.config.ts
export default defineConfig({
  postprocess(util) {
    let baseFontSize = 4 //默认16
    const remRE = /(-?[\.\d]+)rem/g;//转换默认单位rem为px|rpx
    util.entries.forEach((i) => {
      const value = i[1];
      if (typeof value === "string" && remRE.test(value))
        i[1] = value.replace(remRE, (_, p1) => `${p1 * baseFontSize}rpx`);//根据需要,像素单位改为px或者rpx
    });
  },
})

7.规范unocss书写

我们书写采用一定的规范,阅读起来会比较一目了然的。当然,我们书写的时候可以随意书写,可以让插件帮我们自动格式化我们的原子类class的顺序。统一的好处,可以方便我们更好的阅读和维护代码

举个例子

//我们书写的,这样杂乱
<div class="font-bold b-(solid 1 red ) bg-white w-210  text-red m-2 h-100"></div>

//格式化后的代码:当我们保存后,会自动进行eslint格式化,它会按照默认的配置(可以自定义)进行排列,所有写的原子类按照同一个风格,我们看起来就比较方便了,
<div class="m-2 h-100 w-210 b-(1 red solid) bg-white font-bold text-red">222</div>

需要安装插件:参考文档

  • 安装插件:npm install -D @unocss/eslint-config
  • 安装eslint:npm install D eslint
  • .eslintrc.cjs中添加"@unocss",//添加unocss eslint规则在这里插入图片描述
  • vscode eslint插件配置,前提是你要有安装vscode中eslint插件,没有则需要安装。

vscode setting.json 配置:

  "eslint.enable": true,//eslint开启
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // 开启eslint保存自动格式化
  },

在这里插入图片描述

vscode eslint 插件:
它是怎么知道如何去格式化我们的代码呢,这里就用到我们安装的第一个插件了,@unocss/eslint-config,二者缺一不可。
在这里插入图片描述

一定要注意控制台中,eslint启动有没有报错。如果我们用的是vue 官方脚手架,一般不会有啥问题,像这些eslint、@rushstack/eslint-patch、@vue/eslint-config-typescript都在package.json中,我们只需要npm install即可。

我之前使用了一个uniapp官方的一个vite+vue3模板,这些都没有配置,还需要自己去一个个安装进去,要不是看了eslint的控制台输出,我还不知道原因出现在哪里,它只有个.eslintrc.cjs文件,但是package.json中没有所需要的哪些插件信息。

在这里插入图片描述
请注意:这里提到了两个eslint。不要混淆了,一个vscode中的eslint,一个是npm 下的eslint,关于他们的区别请百度。当我们配置完之后,不起作用的情况下,请重启项目,然后检查上面截图的输出日志,根据日志去排查解决问题。

8.apply使用时,单位不转换问题

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3779.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!