Naive UI框架安装和引入使用

Naive UI介绍:

一个 Vue 3 组件库比较完整,主题可调,使用 TypeScript,注意,naive-ui 仅支持 Vue3。

1、 安装
naiva ui
复制代码
// 使用 npm 安装。

npm i -D naive-ui
字体安
复制代码
npm i -D vfonts
2、使用
直接引入(推荐):你可以直接导入组件并使用它。这种情况下,只有导入的组件才会被打包。
复制代码
<template>
  <n-button>naive-ui</n-button>
</template>

<script>
  import { defineComponent } from 'vue'
  import { NButton } from 'naive-ui'

  export default defineComponent({
    components: {
      NButton
    }
  })
</script>

如果你可以使用 setup script,你可以用下面的方式使用组件。

复制代码
<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
  import { NButton } from 'naive-ui'
</script>
全局安装(不推荐):安装全部组件

失去 tree-shaking 的能力,打包有冗余代码。如果你想全局安装但是不想安装全部组件,请参考按需引入

复制代码
import { createApp } from 'vue'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)

使用

复制代码
<template>
  <n-button>naive-ui</n-button>
</template>
按需引入

Naive UI 支持 tree shaking,组件、语言、主题均可 tree-shaking。默认情况组件主题为亮色,语言为英文,无需额外导入。了解更多关于主题设定的信息,参见调整主题

手动引入
复制代码
<script>
  import { defineComponent } from 'vue'
  import { NConfigProvider, NInput, NDatePicker, NSpace } from 'naive-ui'
  // theme
  import { createTheme, inputDark, datePickerDark } from 'naive-ui'
  // locale & dateLocale
  import { zhCN, dateZhCN } from 'naive-ui'

  export default defineComponent({
    components: {
      NConfigProvider,
      NInput,
      NDatePicker,
      NSpace
    },
    setup() {
      return {
        darkTheme: createTheme([inputDark, datePickerDark]),
        zhCN,
        dateZhCN
      }
    }
  })
</script>

<template>
  <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN">
    <n-space vertical>
      <n-input />
      <n-date-picker />
    </n-space>
  </n-config-provider>
</template>

<style>
  body {
    background: black;
  }
</style>
自动引入
  1. 可以使用 unplugin-auto-import 插件来自动导入 API。

如果使用模板方式进行开发,可以使用 unplugin-vue-components 插件来按需自动加载组件,插件会自动解析模板中的使用到的组件,并导入组件。

复制代码
// vite.config.ts
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'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar'
          ]
        }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})
按需全局安装组件(手动)
复制代码
import { createApp } from 'vue'
import {
  // create naive ui
  create,
  // component
  NButton
} from 'naive-ui'

const naive = create({
  components: [NButton]
})

const app = createApp()
app.use(naive)
3、配置字体

Naive UI 可以和 vfonts 配合,你可以简单的引入 vfonts 中的字体,包含常规字体和等宽字体。

只需要在你 App 的入口文件导入字体,即可调整 Naive UI 的字体。

复制代码
// 你 App 的入口 js 文件
// ...

// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'

const app = createApp()
app.use(naive)

// ...

注意:不同 vfonts 字体提供的字重不同,在使用 LatoOpenSans 的时候你需要全局调整 naive-ui 的字重配置。

复制代码
<!-- 调整 naive-ui 的字重配置 -->
<n-config-provider :theme-overrides="{ common: { fontWeightStrong: '600' } }">
  <app />
</n-config-provider>

注意:具体使用请参考官网:Naive UI

相关推荐
切韵9 天前
Unity编辑器扩展:UI绑定复制工具
ui·unity·编辑器
冰茶_9 天前
ASP.NET Core API文档与测试实战指南
后端·学习·http·ui·c#·asp.net
Zevalin爱灰灰9 天前
MATLAB GUI界面设计 第三章——仪器组件
开发语言·ui·matlab
ui设计前端开发老司机9 天前
数字孪生:为UI前端设计带来沉浸式交互新体验
ui
专注VB编程开发20年9 天前
java/.net跨平台UI浏览器SDK,浏览器控件开发包分析
linux·ui·跨平台·浏览器·cef·miniblink
bao_lanlan10 天前
UI设计 | 审美积累 | 极繁风格(Maximalism / Complex UI)
ui·ux·高端网站设计·qt软件开发·高端ui设计公司·用户体验设计公司
鱼雀AIGC10 天前
如何用AI开发完整的小程序<7>—让AI微调UI排版
人工智能·ui·小程序·aigc·ai编程
专注VB编程开发20年10 天前
VB.NET,C#在线程中修改UI的安全操作
ui·c#·.net·vb.net
Zevalin爱灰灰10 天前
MATLAB GUI界面设计 第二章——APP Designer操作正式入门
开发语言·ui·matlab
鱼雀AIGC10 天前
如何用AI开发完整的小程序<9>—UI自适应与游戏页优化
人工智能·ui·小程序·aigc·ai编程