快速上手

你可以直接使用已经准备好的模版项目快速开始，或者参考下面内容自行搭建

准备

在开始前你可能需要 vue3 版本脚手架工具，同时需要提前安装 vue vue-router element-plus

安装

Latest tag via npmnpm bundle sizeNpm Last Updated

npm i element-pro-components
# 或者
yarn add element-pro-components
# 或者
pnpm add element-pro-components

完整引入 

import { createApp } from 'vue'
import App from './App.vue'
import ElementPro from 'element-pro-components'
import 'element-pro-components/lib/styles/index'

const app = createApp(App)

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

按需引入样式

提示

自 0.12.0 起，推荐使用按需引入样式文件夹中的 js 文件替代 css 文件，避免样式的重复引用

自 1.0.0 起，增加对 CommonJS 支持，导入 .cjs 使用

推荐使用 unplugin-vue-components

安装及使用查看 unplugin-vue-components

  • 使用
import { ElementProResolver } from 'element-pro-components'

Components({
  resolvers: [
    ElementProResolver(/* options */),
  ],
}),
  • 参数
参数说明类型默认值
importStyle导入组件的样式文件后缀'js' | 'cjs' | 'css'js
exclude排除不需要自动导入的组件RegExp-
noStylesComponents没有样式的组件名称列表string[]-

在 vite 中使用 vite-plugin-style-import

安装及使用查看 vite-plugin-style-import

  • 修改配置 vite.config
import styleImport from 'vite-plugin-style-import'

export default {
  plugins: [
    styleImport({
      libs: [
        {
          importTest: /^Pro/,
          libraryName: 'element-pro-components',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-pro-components/lib/styles/${name.slice(4)}`
          },
        },
      ],
    }),
  ],
}

手动引入样式

例如：

import { ProLayout } from 'element-pro-components'
import 'element-pro-components/lib/styles/layout'

提示

完整组件列表参考里面的 components

在导出组件的同时，一起导出的还包括内部使用的utils与composables，如果需要可以引用使用

类型提示

对于使用 VS Code 配合 typescript 开发，推荐使用插件 Volar。只需要中向 tsconfig.json 文件中增加全局组件类型

{
  "compilerOptions": {
+    "types": ["element-pro-components/types/components"]
  }
}

或者

{
  "include": [
+   "node_modules/element-pro-components/types/components.d.ts"
  ]
}

也可以向全局类型定义文件中中增加，例如：env.d.ts

+ /// <reference types="element-pro-components/types/components" />

对于 webstorm 也提供了完整的组件、属性、事件补全