快速上手

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

准备

在开始前你可能需要 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

  • 配置信息
{
  resolvers: [
    (name) => {
      if (name.startsWith('Pro')) {
        const fileName = name.slice(3).replace(/\B([A-Z])/g, '-$1').toLocaleLowerCase()
        return {
          importName: name,
          path: 'element-pro-components',
          sideEffects: `element-pro-components/lib/styles/${fileName}`
        }
      }
    }
  ],
}

在 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)}`
          },
        },
      ],
    }),
  ],
}

在 vue-cli 中使用 babel-plugin-import

安装及使用查看 babel-plugin-import

  • 修改配置 babel.config
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-pro-components',
        customStyleName: (name) => {
          return `element-pro-components/lib/styles/${name.slice(4)}`
        },
      },
    ],
  ],
}

手动引入样式

例如:

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

提示

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

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

全局配置

危险

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