Naive UI组件库的使用-第一部分

Naive UI

前言

navie ui：https://www.naiveui.com/zh-CN/os-theme

官网介绍：
Naive UI 是一个 Vue3 的组件库。

它比较完整，主题可调，用 TypeScript 写的，快。

---

提示：已有超过 90 个组件，希望能帮你少写点代码。 顺便一提，它们全都可以 treeshaking。
该组件库，最大的特点就是字体可以自定义渐变色，非常漂亮。组件中的复选框，时间轴，按钮都做了细节的美化。这些都是可圈可点的地方。

一、naive ui是什么？

Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。

顺便一提，你不需要导入任何 CSS 就能让组件正常工作。

二、使用步骤

1.安装[对于vue3+vite+typescript构建的项目]

安装

pnpm i -D naive-ui

安装字体

pnpm i -D vfonts

附录：vite 构建的vue3 ，typescript

pnpm create vite
Project-name
vue
typescript

2.全局配置

main.ts：

import {
    createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import naive from "naive-ui";
// 通用字体
import "vfonts/Lato.css";
// 等宽字体
import "vfonts/FiraCode.css";
const app = createApp(App);
app.use(naive).mount("#app");

3.自动引入

import {
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {
    NaiveUiResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
   
  plugins: [
    vue(),
    AutoImport({
   
      imports: [
        "vue",
        {
   
          "naive-ui": [
            "useDialog",
            "useMessage",
            "useNotification",
            "useLoadingBar",
          ],
        },
      ],
    }),
    Components({
   
      resolvers: [NaiveUiResolver()],
    }),
  ],
});

---

4.推荐使用的图标和字体

字体：
vfonts
图标：
naive-ui 建议使用 xicons 作为图标库。
xicons
官网：https://www.xicons.org/#/
图标的使用：
Icons Preview & Search

方法一

Icons installation
参考官网：https://github.com/07akioni/xicons#installation
https://www.xicons.org/#/
所以这里安装 这8类图标库即可。

pnpm i -D @vicons/fluent
pnpm i -D @vicons/ionicons4
pnpm i -D @vicons/ionicons5
pnpm i -D @vicons/antd
pnpm i -D @vicons/material
pnpm i -D @vicons/fa # font awesome
pnpm i -D @vicons/tabler
pnpm i -D @vicons/carbon
// 使用
// vue3 demo
<script>
  import {
    Money16Regular } from '@vicons/fluent'
  // or
  import Money16Regular from '@vicons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @vicons/utils

  import {
    Icon } from '@vicons/utils'

  export default {
   
    components: {
   
      Icon,
      Money16Regular
    }
  }
</script>

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

方法二：直接使用svg图像，从官网直接点击copy即可 ，以图片方式引入到vue中

比如：

方法三：官网 直接下载 svg图像文件 双击官网图标即可下载。