PlusProComponents

主题

快速开始 ​

本节将介绍如何在项目中使用 PlusProComponents。

注意

以下使用步骤完成后，请配置国际化，否则可能导致文本显示异常。

使用之前 ​

在开始使用 PlusProComponents 之前，有必要先了解以下基础知识，我们假设您已经写过 Vue 3，并掌握了下面的内容。

用法 ​

plus-pro-components 和element-plus 导入方式需要保持一致。

完整引入 ​

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

main.ts

typescript
import { createApp } from 'vue'

// 导入element-plus 及其样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 导入plus-pro-components 及其样式
import PlusProComponents from 'plus-pro-components'
import 'plus-pro-components/index.css'

import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)

// 使用
app.use(PlusProComponents)
app.mount('#app')

Vue - Official （Volar）支持 ​

如果您使用 Vue - Official （Volar），请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["plus-pro-components/global"]
  }
}

自动按需导入 推荐 ​

PlusProComponents 提供了基于ES Module 的开箱即用的 Tree Shaking 功能。

    1. 安装插件
    sh
    pnpm install -D unplugin-vue-components unplugin-auto-import @plus-pro-components/resolver
    1. 配置 vite.config.ts 或者配置 webpack(vue).config.js

    @plus-pro-components/resolver 文档

    ts
    // vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { PlusProComponentsResolver } from '@plus-pro-components/resolver'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver(), PlusProComponentsResolver()]
    })
  ]
})
    js
    // webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { PlusProComponentsResolver } = require('@plus-pro-components/resolver')

module.exports = {
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [PlusProComponentsResolver(), ElementPlusResolver()]
    })
  ]
}
    js
    // vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { PlusProComponentsResolver } = require('@plus-pro-components/resolver')

module.exports = defineConfig({
  // ...
  configureWebpack: {
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [PlusProComponentsResolver(), ElementPlusResolver()]
      })
    ]
  }
})

    1. 使用组件

      App.vue

    html
    <template>
  <!-- 自动导入 -->
  <PlusPagination :total="total"  />
</template>

<script setup>
  const total = 100
</script>

自动按需导入示例工程 ​

如果你需要新建一个项目，我们推荐使用 Vite。

以下是 plus-pro-components 官方提供的一些示例项目，你可以克隆该项目，并直接拷贝代码来使用。

  • vite-project：使用 Vue 3、Vite 、element-plus、plus-pro-components 搭建应用。

  • vue-cli-project：使用 Vue 3、vue-cli@5 、element-plus、plus-pro-components 搭建应用。

手动导入 ​

手动导入需要导入组件和其对应的样式文件。如下示例：

html
<template>
  <PlusDatePicker></PlusDatePicker>
</template>

<script>
  import { PlusDatePicker } from 'plus-pro-components'
  import 'plus-pro-components/es/components/date-picker/style/css'

  export default {
    components: { PlusDatePicker }
  }
</script>

CDN ​

示例

注意

使用 CDN 时，在 HTML 中所有的组件都是小写中划线隔开的形式，不支持单标签。

例如：

html
<!-- 不支持 -->
<PlusPagination :total="100" />

需要写成

html
<!-- 支持 -->
<plus-pagination :total="100"></plus-pagination>