Vue DevUI
主题

快速开始

引导您如何在项目中使用Vue DevUI

Vue版本

当前支持的 Vue 版本^3.0.0

1. 创建一个项目

推荐使用@vite/cli创建你的项目

# npm 6.x
npm create vite my-vue-app --template vue-ts

# npm 7+
npm create vite my-vue-app -- --template vue-ts

2. 安装

进入你的项目文件夹，使用 NPM 安装Vue DevUI和配套的图标库

npm i vue-devui @devui-design/icons devui-theme

3. 引入插件和样式

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

import DevUI from 'vue-devui';
import 'vue-devui/style.css';
import '@devui-design/icons/icomoon/devui-icon.css';
import { ThemeServiceInit, infinityTheme } from 'devui-theme';

ThemeServiceInit({ infinityTheme }, 'infinityTheme');

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

4. 使用

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

<template>
  <!-- 使用 Button 组件 -->
  <d-button>确定</d-button>
</template>

5. 启动开发调试 

npm run dev

6 按需引入

参考：按需引入

7 主题定制

参考：主题定制

粤A2-20044005号