vue 3.0尤雨溪亲推ui组件库naive

前言

2021年6月7日尤雨溪在微博上推荐了naive 这个来自图森未来的开源组件库。

naive ui 组件库官网 https://www.naiveui.com/zh-CN/os-theme

安装naive-ui 组件

npm i -D naive-ui
或
yarn add naive-ui

安装 naive 字体

npm i -D vfonts
或
yarn add vfonts

全局引入naive的两种方式

全局安装（不推荐）
失去 tree-shaking 的能力，打包有冗余代码。

import { createApp } from 'vue'
import naive from 'naive-ui'
const app = createApp(App)
app.use(naive)

按需全局安装

import { createApp } from 'vue'
import {// create naive uicreate,// componentNButton
} from 'naive-ui'const naive = create({components: [NButton]
})const app = createApp()
app.use(naive)

我的项目是这样按需全局安装的

修改项目根目录src文件下的main.ts

因为我在项目中使用了router 和 store

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'import { create, NButton } from 'naive-ui'const naive = create({components: [NButton]
})createApp(App).use(store).use(router).use(naive).mount('#app')

引入字体文件

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

// 你 App 的入口 js 文件
// ...// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'const app = createApp()
app.use(naive)

组件中使用naive-ui组件库

由于我在全局main.ts引入Nbutton了，所以在组件中无需再引入，直接使用。

<template><n-button>Default</n-button><n-button type="primary">Primary</n-button><n-button type="info">Info</n-button><n-button type="success">Success</n-button><n-button type="warning">Warning</n-button><n-button type="error">Error</n-button>
</template><script>
export default {}
</script><style></style>

当然也可以在组件中单独引入

<template><n-card title="卡片"> 卡片内容 </n-card>
</template><script>
import { NCard } from 'naive-ui'
export default {components: {'n-card': NCard}
}
</script><style></style>

调整主题色和主题变量

官网有很清晰的介绍
https://www.naiveui.com/zh-CN/os-theme/docs/customize-theme

在App.vue进行配置主题变量和主题色

<script>
import { NConfigProvider } from 'naive-ui'
const themeOverrides = {common: {primaryColor: '#ff2d52'},Button: {textColor: '#ff2d52'},Select: {peers: {InternalSelection: {textColor: '#FF0000'}}}// ...
}
export default {data() {return {themeOverrides}},components: {'n-config-provider': NConfigProvider}
}
</script>
<style lang="css"></style><template><n-config-provider :theme-overrides="themeOverrides"><router-view /></n-config-provider>
</template>

最终的效果

naive 官网给了很多变量可以配置

https://www.naiveui.com/zh-CN/os-theme/docs/theme

官网有更多的组件，大家可以一起来体验

https://www.naiveui.com/zh-CN/os-theme/components/button