1、安装UI组件库 naive-ui

yarn add naive-ui

 

2、全局按需引入

在src下新建uitls目录并添加uaiveUI.ts

// src/utils/naiveUI.ts

import {

  create,

  NButton

} from 'naive-ui'

export const naiveUI = create({

  components: [NButton]

})

 

3、在main.ts中导入可全局使用

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import router from './router'

import { naiveUI } from './utils/naiveUI'

createApp(App).use(router).use(naiveUI).mount('#app')

 

4、具体页面直接通过标签使用

<template>

  <div id="vditor" style="width: 100%; height: 100%;"/>

  <n-button type="primary" @click="getContent">获取html内容</n-button>

</template>

 

 

5、安装图标库

yarn add @vicons/ionicons5

页面引入使用

import {

  CodeDownload

} from '@vicons/ionicons5'

<n-button type="primary" @click="getContent"><n-icon size="12"><code-download /></n-icon>获取html内容</n-button>

如果报提示：

Cannot find module '@vicons/ionicons5' or its corresponding type declarations.ts(2307)

则在env.d.ts 或 vite-env.d.ts，添加声明即可

declare module '@vicons/ionicons5'

6、使用消息提示message

在全局或需要使用message的地方使用 <n-message-provider>，然后使用 useMessage方法获取对应api，如

// App.vue中用 <n-message-provider> 包裹着，可全局使用

<template>

  <n-message-provider>

<section>……</section>

  </n-message-provider>

</template>

然后在具体子页面使用

import { useMessage } from 'naive-ui'

import { defineComponent } from 'vue'

// content

export default defineComponent({

  setup () {

    const message = useMessage()

    return {

      warning () {

        message.warning('...')

      }

    }

  }

})