Quick start

You can refer to the template project to use, or build it yourself through the following content

Ready

You may need the vue3 version of the scaffolding tool before you start

Install

Latest tag via npmnpm bundle sizeNpm Last Updated

npm i element-pro-components
# or
yarn add element-pro-components
# or
pnpm add element-pro-components

Fully import 

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')

On demand

Tip

Since 0.12.0, it is recommended to use the js file in the style folder imported on demand instead of the css file to avoid repeated references of styles.

Since 1.0.0, support CommonJS by import .cjs

Installation and use view unplugin-vue-components

  • Used
import { ElementProResolver } from 'element-pro-components'

Components({
  resolvers: [
    ElementProResolver(/* options */),
  ],
}),
  • Options
NameDescriptionTypeDefault
importStylestyle file suffix for import component'js' | 'cjs' | 'css'js
excludeexclude components that do not require automatic importRegExp-
noStylesComponentsa list of component names that have no stylesstring[]-

Use vite-plugin-style-import in vite

Installation and use view vite-plugin-style-import

  • change vite.config
import styleImport from 'vite-plugin-style-import'

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

By hand

example:

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

Tip

Component list reference components

In addition to components, you can also use some internal utils or composables

Global config

Danger

Since 1.0.0, The global configuration has been removed, it is recommended to use related components to pass parameters or internationalization

Start using

Tip

Document example based on Composition API, If you are not familiar with the syntax, please visit the official document

If you use VS Code to develop, cooperate with Vetur to provide complete components, prop, and event completion. example: input <pro- will list all components

If you use VS Code with typescript to develop, It is recommended to use plug-in Volar. Just add the global component type definition to the tsconfig.json file

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

or

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

You can also add to the global type definition file, eg: env.d.ts

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

If you use webstorm to develop, complete components, prop, and event completions

<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>