快速开始

建议

• 在开始之前，推荐先学习 Vue 和 ES2015，并正确安装和配置了 Node.js v20 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。

• 如果您正在从0开始一个中后台项目，建议您直接使用 Pro Design Admin 搭建项目，跳转到最佳实践。

兼容性

Pro Design Vue 支持最近两个版本的浏览器。

由于 Vue 3 不再支持 IE11，Pro Design Vue 也不支持 IE 浏览器。

Edge	Firefox	Chrome	Safari	Opera
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

引入 pro-design-vue

新建项目

如果你需要新建一个项目，可以使用 Vite、Rsbuild 或 Vue CLI。

请使用命令行来初始化项目：

• Vite:

$ npm create vite@latest

• Rsbuild:

$ npm create rsbuild@latest

• Vue CLI:

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

$ vue create pro-demo

Vue CLI 已经停止迭代，因此不推荐使用。

安装

npm

$ npm install pro-design-vue --save

yarn

$ yarn add pro-design-vue

pnpm

$ pnpm install pro-design-vue

注册

如果使用 Vue 默认的模板语法，需要注册组件后方可使用，有如下三种方式注册组件：

全局完整注册

import { createApp } from 'vue'
import ProDesign from 'pro-design-vue'
import App from './App'
import 'pro-design-vue/dist/index.css'

const app = createApp(App)

app.use(ProDesign).mount('#app')

以上代码便完成了 ProDesign 的全局注册。需要注意的是，样式文件需要单独引入。

全局部分注册

import { createApp } from 'vue'
import { ProForm } from 'pro-design-vue'
import App from './App'
import 'pro-design-vue/dist/index.css'

const app = createApp(App)

/* 会自动注册 ProForm 下的子组件, 例如 ProForm.Drawer */
app.use(ProForm).mount('#app')

局部注册组件

此种方式需要分别注册组件子组件，如 Button、ButtonGroup，并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。

<template>
  <pro-button>Add</pro-button>
</template>
<script>
  import { ProButton } from 'pro-design-vue'

  export default {
    components: {
      ProButton,
    },
  }
</script>