Vue DevUI
主题

按需引入

除了全量引入，我们也支持单个组件按需引入。

自动引入

配置unplugin-vue-components插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：

  • 安装unplugin-vue-components插件
npm i -D unplugin-vue-components
  • 在vite.config.ts文件中添加以下代码：
import Components from 'unplugin-vue-components/vite'
import { DevUiResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    // 新增
    Components({
      resolvers: [
        DevUiResolver()
      ]
    })
  ]
})

配置了以上插件，就可以直接在代码中使用Vue DevUI的组件，而无需在main.ts文件中引入Vue DevUI。

手动引入

在src/main.ts文件中写入以下内容：

import Button from 'vue-devui/button';
import 'vue-devui/button/style.css';

createApp(App).use(Button).mount('#app');

在src/App.vue文件的<template>中增加以下内容：

<template>
  <!-- 使用 Button 组件 -->
  <d-button>确定</d-button>
</template>
粤A2-20044005号