vue3笔记（40-1）新模版框架使用

近期换了个模版框架，这里记录下使用过程中的一些新知识。

unocss

UnoCSS 是即时原子 CSS 引擎，所有 CSS 工具都是通过预设提供的.
在vite.config.ts中配置unocss插件：

1
2
3
4
5
6
7
import UnoCSS from 'unocss/vite'

export default ({ command, mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [UnoCSS()]
  }
}

导入全局样式

1
import 'virtual:uno.css'

创建uno.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import {
  defineConfig,
  toEscapedSelector as e,
  presetUno,
  presetIcons,
  presetAttributify,
  presetTypography
} from 'unocss'

export default defineConfig({
  // 使用预设
  presets: [
    presetUno({ dark: 'class', attributify: false }),
    ...createPresetIcons(),
    presetAttributify(), // 属性化预设
    presetTypography() // 版式预设
  ],
  // 自定义规则
  rules: [
    ['m-1', { margin: '1px' }],
    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [
      /^text-color-primary$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
          ${selector} {
            color: rgb(22, 93, 255);
          }`
      }
    ],
  ],
})

UnoCSS 默认字体大小为 4px，如果需要自定义，特别是针对移动端做一个适配，可以通过设计稿宽度计算出基准字体大小，然后通过postprocess函数对所有样式进行处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
postprocess: [
  (util) => {
    const remRE = /(-?[\.\d]+)rem/g;
    const designWidth = 422; // 设计稿宽度
    const defaultWidth = 384; // 默认浏览器窗口宽度
    const rootFontSize = 42.2; // 基准字体大小
    const unoDefaultFontSize = 4; // UnoCSS 默认字体大小
    const scale = defaultWidth / designWidth;

    util.entries.forEach((entry) => {
      const value = entry[1];
      if (value && typeof value === 'string' && remRE.test(value))
        entry[1] = value.replace(remRE, (_, p1) => {
          const computeRem = (rootFontSize / unoDefaultFontSize) * scale;
          return `${(p1 / computeRem) * scale}rem`;
        });
    });
  },
]

但是这样做有一定风险，如果用的是PC端框架，很多组件已经有自己的样式了，突然改变 root font-size 会导致样式失效。所以，还是建议使用 UnoCSS 预设的默认字体大小。

附录
框架参考
UnoCSS中文网
unocss实现多端的rem适配