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('...')
}
}
}
})