手把手搭建Vue3中后台框架-NaiveUI、Less、Unocss-51CTO.COM

Vue的第三方组件库非常多，最优秀的就是Element-Plus和Ant Design，当然还有其他大厂出品的KPI项目，我们打算使用大佬推荐过的一个UI库-NaiveUI。这个库的引入和安装非常简单，官网上有详细的说明。

NaiveUI安装与使用

pnpm install naive-ui

很多组件库都提供了全局引入和按需引入等配置方式，我们当然都推荐使用按需引入，按需引入有两种方式，一种是在页面手动引入需要使用的库，另一种自动按需引入，使用unplugin-auto-import和unplugin-vue-components库，虽然这种方式使用起来方便，但是按需引入的时候加载会比较慢，所以我们推荐使用手动引入的方式。

配置NaiveUI

安装完NaiveUI我们需要进行全局配置，这样才能使用它的主题和通知类的组件。在官方文档的全局化配置页面查看：

<n-config-provider :theme="theme">
  <app />
</n-config-provider>

NConfigProvider会配置主题、国际化等，我们一般把它配置的app.vue中，结果如下：

<n-config-provider :theme="theme === 'dark' ? darkTheme : lightTheme" :locale="zhCN" :date-locale="dateZhCN">
  <n-global-style />
  <router-view></router-view>
</n-config-provider>

其中NGlobalStyle是为了把样式添加到全局，也就是body上，这样对于一些不包裹在NConfigProvider之内组件也能响应主题变化，例如使用Teleport把组件挂载在body上。

除了全局配置以外，还有message、dialog、notification、loadingBar需要配置，配置的方式有两种，一种是在app.vue中像NConfigProvider一样添加，然后在组件中使用useXxxx来使用，但是这种方式只能在组件内使用，如果在非组件内，例如store和router就会有问题了。因此官方还提供了一个全局使用的方式，使用全局API，这种方式就会脱离上下文，脱离上下文以后就不会受n-xxx-provider的限制了，但是同时也不能跟随主题变化，需要我们自己去处理，使用方式如下：

import { createDiscreteApi } from 'naive-ui';

const { message, dialog, notification, loadingBar } = createDiscreteApi([
  'message',
  'dialog',
  'notification',
  'loadingBar'
]);
export { message, dialog, notification, loadingBar };

安装Less

css是前端必须使用的，但是标准css的用法太过单一，不够灵活，因此衍生出很多第三方的css库，最流行的就是less和sass，这里我们选择less。

pnpm install -D less

less的使用非常简单，在.vue文件中style标签上加上lang="less"，就可以在style中使用less书写css了。

安装unocss

UnoCSS 是一个原子化 CSS 引擎，而不是一个框架，受 Windi CSS, Tailwind CSS, Twind 启发，但是它更快、更小。

pnpm install -D unocss @unocss/preset-uno @unocss/preset-icons @unocss/preset-attributify @iconify-json/ic

unocss自身不带css样式，由你自己编写规则，比如m-4，你可以指定它为margin: 4px也可以指定它为margin: 40px，但是我们当然不会把所有的都自己写一遍，那太麻烦了，因此unocss也提供了一些预设的css样式模板。比较常用的就是上面安装的三种：

@unocss/preset-uno：它作为unocss的默认预设，提供了流行的实用程序优先框架 Tailwind CSS、Windi 的通用超集 CSS、Bootstrap、Tachyons 等。添加了这个预设，我们就可以像使用Tailwind CSS那样去使用unocss了。
@unocss/preset-attributify：对其它预设和规则提供属性模式，可以像使用属性那样在HTML中使用css。
@unocss/preset-icons：可以让我们通过css类名来使用各种图标，Iconify 作为图标的数据源，因此当安装了此库后，还需要安装对应的图集库： @iconify-json/*，在对应的Iconify官网可以看到所有支持的图集。

我们可以选择自己喜欢的图标去安装，当然也可以安装所有的图标：@iconify/json，但是它有130M，我想应该没有人会这么使用它吧。在这里我们使用Google Material Icons。

打开上面页面的时候，查看一下地址栏：https://icones.js.org/collection/ic，记住后面的ic，这个图集的库名称为：@iconify-json/ic。图标的使用语法是：i+图集缩写+图标名，例如：i-ic-baseline-add-circle。

引入unocss

在vite.config.ts中引入

import Unocss from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

plugins: [
  vue(),
  Unocss({
    presets: [
        presetUno(), 
        presetAttributify(), 
        presetIcons({scale: 1.2, warn: true})],
  }),
]

在main.ts中引入uno.css。

import 'uno.css'

在VSCode中我们可以通过安装插件：UnoCSS，来获得智能提示，增强编程体验。