Element Plus is a front-end component library generated by refactoring Element UI for Vue3, which contains rich basic components

Here is the official document, which has been very comprehensive and detailed, and many of the questions you have encountered can be answered in the above

Now that we have created a Vue3 project using vuE-CLI 4, how do we introduce Element Plus into the project?

Note that the Vue3 project must be created using VUE-CLI 4, otherwise an error will be reported. First, the default generated directory structure will be described

+ demo + node_modules + public - favicon.ico - index.html + SRC (where we write our own files) + Assets (store resource files) + Components (store public components) + router.js (Route management: router) + store.js (state management: Vuex) + views (Store view component) -app.vue (page entry file) -main.js (program entry file) -package. json (project configuration file) -package-lock. json (project configuration file) - Babel.config.js (Babel configuration file) - readme.md (project description document) -... (Other configuration files)Copy the code


1. Install Element Plus

NPM is Node’s package management tool, through which you can install Element Plus

With the –save option, you can also write the configuration to the Dependencies field of package.json (production environment dependencies)

npm install --save element-plus
Copy the code


2. Introduce Element Plus

There are two ways to introduce Element Plus into a Vue, full and partial, as described below

(1) Introduction of all

By importing and registering all components in main.js, you can use all components directly in other pages

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// New code: introduce all components and styles
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(store)
app.use(router)

// Add code to register all components
app.use(ElementPlus)

app.mount('#app')
Copy the code

It is not a good idea to import all components, whether they are used or not, in this way

(2) Local introduction

Import and register specific components in main.js, and only use specific components in other pages

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// New code: introduces specific components and styles
import {
  ElButton
} from 'element-plus'
import 'element-plus/lib/theme-chalk/el-button.css'

const app = createApp(App)

app.use(store)
app.use(router)

// Add code to register specific components
app.component(ElButton.name, ElButton)

app.mount('#app')
Copy the code

With this import approach, you can ensure that only the required components are imported (on demand)

However, it is too cumbersome to manually import the corresponding style file for each component you import


The babel-plugin-import plug-in can assist in this task by first installing the babel-plugin-import plug-in

Add the –save-dev option and write the configuration to the devDependencies field of package.json (development environment dependencies)

npm install --save-dev babel-plugin-import
Copy the code

Then configure the plug-in in babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'].// Add new code
  plugins: [["import",
      {
        libraryName: 'element-plus'.customStyleName: (name) = > {
          return `element-plus/lib/theme-chalk/${name}.css`; }}]]}Copy the code

The components are then imported as needed in main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// New code: introduces specific components
// The corresponding style files will be automatically imported. There is no need to manually import one by one
import {
  ElButton
} from 'element-plus'

const app = createApp(App)

app.use(store)
app.use(router)

// Add code to register specific components
app.component(ElButton.name, ElButton)

app.mount('#app')
Copy the code

Finally, remember to restart the application with NPM Run Serve so that specific components can be used in other pages


3. Use Element Plus

After installing and introducing Element Plus, we can use Element Plus components in our pages

<template>
  <div>
    <el-button type="primary" @click="handleClick">Primary</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log('click', e)
    }
  }
}
</script>
Copy the code

If you see a blue button appear on the page, the configuration is successful

Now you can enjoy the productive development experience Element Plus provides