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, and you need to install vue, vue-router, element-plus in advance.

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

TypeScript

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