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

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,来获得智能提示,增强编程体验。

当前名称:手把手搭建Vue3中后台框架-NaiveUI、Less、Unocss
文章地址:http://www.gawzjz.com/qtweb/news17/173667.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联