手把手搭建Vue3中后台框架-NaiveUI、Less、unocss

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

安装与使用

pnpm install naive-ui

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

我们推荐使用手动引入的方式。

配置

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

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

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

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

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了

安装

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

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

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

引入

在vite..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'

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