Vue的第三方组件库非常多,最优秀的就是Element-Plus和Ant Design,当然还有其他大厂出品的KPI项目,我们打算使用大佬推荐过的一个UI库-NaiveUI。这个库的引入和安装非常简单,官网上有详细的说明。
NaiveUI安装与使用
pnpm install naive-ui
很多组件库都提供了全局引入和按需引入等配置方式,我们当然都推荐使用按需引入,按需引入有两种方式,一种是在页面手动引入需要使用的库,另一种自动按需引入,使用unplugin-auto-import和unplugin-vue-components库,虽然这种方式使用起来方便,但是按需引入的时候加载会比较慢,所以我们推荐使用手动引入的方式。
配置NaiveUI
安装完NaiveUI我们需要进行全局配置,这样才能使用它的主题和通知类的组件。在官方文档的全局化配置页面查看:
NConfigProvider会配置主题、国际化等,我们一般把它配置的app.vue中,结果如下:
其中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,来获得智能提示,增强编程体验。