安装
yarn add naive-ui
全局按需引入组件
- 新建ui/index.ts
import {
// create naive ui
create,
// component
NButton, NConfigProvider
} from 'naive-ui'
const naive = create({
components: [NButton, NConfigProvider]
})
export default naive;
- 注入到mian.ts
import naive from './ui/index'
app.use(naive)
- 使用
<template>
<n-button>naive-ui</n-button>
<n-button type="primary">naive-ui</n-button>
</template>
4.效果
image.png
全局自定义主题
- 新建ui/theme.ts
/**
* js 文件下使用这个做类型提示
* @type import('naive-ui').GlobalThemeOverrides
*/
import { GlobalThemeOverrides } from 'naive-ui'
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#2080F0',
primaryColorHover: '#4098FC',
primaryColorPressed: '#1060C9',
primaryColorSuppl: '#4098FC'
},
// Button: {
// textColor: '#FF0000'
// }
}
export default themeOverrides
- 使用App.vue
<template>
<n-config-provider :theme-overrides="themeOverrides">
<router-view></router-view>
</n-config-provider>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import themeOverrides from "./ui/theme";
import HelloWorld from "./components/HelloWorld.vue";
export default defineComponent({
name: "App",
components: {
},
setup(props) {
return { themeOverrides };
}
});
</script>
image.png
