快速上手

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

准备

在开始前你可能需要 vue3 版本脚手架工具

安装

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，如果需要可以引用使用

全局配置

危险

自 1.0.0 起，已经移除全局配置，推荐现在使用相关组件传参或者国际化实现

开始使用

提示

文档示例基于 组合式 API 语法，如果不熟悉语法请前往官方文档查看

如果使用 VS Code 开发，配合 Vetur 使用提供完整的组件、属性、事件补全。例如：输入 <pro- 将罗列出所有组件库组件

对于使用 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 也提供了完整的组件、属性、事件补全

<template>
  <pro-layout
    :routes="routes"
    transition="el-fade-in"
  >
    <template #logo="{ collapse }">
      <transition
        name="el-zoom-in-top"
        mode="out-in"
      >
        <img
          v-if="collapse"
          src="/logo.svg"
          alt="logo"
          class="logo-img"
        >
        <span
          v-else
          class="logo-title"
        > element-pro-components </span>
      </transition>
    </template>
    <template #header-left>
      <pro-breadcrumb />
    </template>
    <template #header-right>
      <nav-header />
    </template>
    <template #header-bottom>
      <pro-tabs ref="tabs" />
    </template>
  </pro-layout>
  <pwa-popup />
</template>

<script setup lang="ts">
import { computed, provide, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { useLang } from '../composables/index'
import NavHeader from '../components/NavHeader.vue'
import PwaPopup from '../components/PwaPopup.vue'

const router = useRouter()
const lang = useLang()
const tabs = shallowRef({})
const routes = computed(() => {
  const reg = new RegExp(`^\\/(${lang.value}|dev)\\/`)
  const routes = router.options.routes
  return routes.filter((item) => reg.test(item.path))
})

provide('tabs', tabs)
</script>

<style scoped>
.logo-img {
  padding: 7px 10px;
  width: calc(var(--pro-layout-width-aside-collapse) - 20px);
}
.logo-title {
  line-height: var(--pro-layout-height-header);
}
</style>