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

官方安装地址：

安装 - Naive UI

1.npm安装Naive UI

cnpm i naive-ui
1

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20