尤雨溪推荐的Naive UI实战

安装

yarn add naive-ui

全局按需引入组件

1. 新建ui/index.ts

import {
    // create naive ui
    create,
    // component
    NButton, NConfigProvider
} from 'naive-ui'

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

export default naive;

2. 注入到mian.ts

import naive from './ui/index'
app.use(naive)

3. 使用

<template>
  <n-button>naive-ui</n-button>
  <n-button type="primary">naive-ui</n-button>
</template>

4.效果

image.png

全局自定义主题

1. 新建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

2. 使用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