安装Naive UI【包含自动导入常用组件】

官方安装地址：

安装 - Naive UI

1.npm安装Naive UI

cnpm i naive-ui

naive组件挺多的（超过80个组件），需要花一点时间去安装

2.创建ts文件，导入常用组件

这里我对常用的组件进行了直接导入，其他不常用的可自行导入

import type { App } from "vue";
/** 导入常用的navie组件 */
import {
    create,
    NButton,
    NCard,
    NCheckbox,
    NConfigProvider,
    NDataTable,
    NDescriptions,
    NDescriptionsItem,
    NDialogProvider,
    NDivider,
    NDrawer,
    NDrawerContent,
    NDropdown,
    NEmpty,
    NForm,
    NFormItem,
    NGradientText,
    NGrid,
    NGridItem,
    NInput,
    NInputGroup,
    NInputNumber,
    NList,
    NListItem,
    NLoadingBarProvider,
    NModal,
    NMenu,
    NMessageProvider,
    NNotificationProvider,
    NPopover,
    NScrollbar,
    NSelect,
    NSpace,
    NStatistic,
    NSwitch,
    NSpin,
    NTabs,
    NTabPane,
    NTag,
    NThing,
    NTimeline,
    NTimelineItem,
    NTooltip,
} from 'naive-ui'

/** 根据上方导入的进行创建 */
export default function setupNaiveUI(app: App) {
    const commonNaive = create({
        components: [
            NButton,
            NCard,
            NCheckbox,
            NConfigProvider,
            NDataTable,
            NDescriptions,
            NDescriptionsItem,
            NDialogProvider,
            NDivider,
            NDrawer,
            NDrawerContent,
            NDropdown,
            NEmpty,
            NForm,
            NFormItem,
            NGradientText,
            NGrid,
            NGridItem,
            NInput,
            NInputGroup,
            NInputNumber,
            NList,
            NListItem,
            NLoadingBarProvider,
            NModal,
            NMenu,
            NMessageProvider,
            NNotificationProvider,
            NPopover,
            NScrollbar,
            NSelect,
            NSpace,
            NStatistic,
            NSwitch,
            NSpin,
            NTabs,
            NTabPane,
            NTag,
            NThing,
            NTimeline,
            NTimelineItem,
            NTooltip,
        ],
    });
    app.use(commonNaive);
}

3.在main.ts中引入

为避免一行中很长，特把之前的代码改写成函数

import { createApp } from 'vue';
import App from './App.vue';
import setupNaiveUI from './components/BasicComponents/naive-import';
import router from './router';
import store from './store';

// createApp(App).use(store).use(router).mount('#app');
async function setupApp() {
    const app = createApp(App)

    app.use(store)

    setupNaiveUI(app)

    app.use(router)

    app.mount('#app')
}

setupApp()