Naive UI初体验

codeclode
929 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

使用场景

由于我最近的一项大作业要求写一套外卖系统，虽然这对于写过一些web项目的我来说不是难事，但为了界面更加好看，因为多少被ElementUI搞得审美疲劳，我决定查阅一下和Vue配对的组件库，发现naive UI被尤大推荐过，故决定使用Naive UI作为系统组件库。

使用需要做的准备

注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。

官网如此声明。 我们首先要准备Vue3的环境，同时使用 unplugin-auto-import实现方便的自动按需引入。对于对应的icon资源，官方推荐使用 xicons 作为图标库。因此，我们在准备好Vite下的Vue3后进行以下安装：

npm i @vicons/fluent
npm i unplugin-auto-import
npm i unplugin-vue-components

最后修改Vite配置

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

主题样式修改

naive ui 提供了内置的深色和浅色样式，这非常炫酷，当然我们也可以自定义修改主题样式。

Naive UI 通过使用 n-config-provider 调整主题。 默认情况下所有组件均为亮色主题，无需任何配置。

如果想要修改深浅色样式主题，则

<template>
  <n-config-provider :theme="darkTheme">
    <app />
  </n-config-provider>
</template>

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

  export default defineComponent({
    setup() {
      return {
        darkTheme
      }
    }
  })
</script>

如果希望自定义颜色，那么可以通过修改，n-config-provider中的theme-overrides属性调整，向此属性中给GlobalThemeOverrides类型的对象。当然，官方实际上也给出了方便的导出json对象的方式。

  • 首先点击官方文档右下角的魔法棒 image.png
  • 接下来就可以直接修改属性 image.png
  • 官方文档的样式属性会随着你的修改而修改，因此你可以随时预览效果。
  • 设置完成后点击导出就可以获取json对象 image.png
  • 将此对象作为theme-overrides传给n-config-provider就可以实现样式的设置啦。

总结

Naive ui组件库不拘一格，炫酷又稳健，而且官方文档的例子很有趣，值得一用。

avatar
文章
阅读
粉丝