前端框架搭建（三）导入项目插件【vite】_uncoss

这里开始，我们需要开始对vite的插件导入进行改造，以uncoss——css框架导入为例

1.下载依赖

pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

1
2

2.导入vite.config.ts

// 引入Unocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'
1
2
3

使用

Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })
1
2
3
4
5
6

然后，我们发现了一点不太合理的地方，如果我们有很多项目插件，那岂不是都要在vite.config.ts中导入，那这样将会越来越长，就显得很不合理了

3.在plugins\assets.ts添加导入

在上一个模块中，我们就提到了assets.ts文件的导入是用来导入其他外来样式的。这里的css框架正好是外来的样式，因此直接在这里进行导入

在这个时候我们就发现了，我们单独将外来的样式封装为一个方法是一个多么明智的选择。

当我们新增一个外来插件的时候，需要导入样式时，仅需在此处添加一个导入即可！

4.使用测试

我们直接对HelloWorld.vue进行测试

  <h1 class="text-25px text-#ff6700 bg-#ccc">{{ msg }}</h1>

1
2

实现效果