Global introduction and local introduction of Element-plus into vue (with code)

This article brings you relevant knowledge about vue, which mainly introduces the issues related to the global introduction and local introduction methods of vue3 integrated Element-plus. Let’s take a look at it together. I hope everyone has to help.

【Related recommendations: javascript video tutorial, vue.js tutorial】

First download element- plus

npm install element-plus

1. The first way is to use global import

The way to introduce element-plus is global import, which means that all components and plug-ins will be automatically registered,

Advantages: Quick to get started

Disadvantages: It will increase the size of the package

In the main.ts file

import { createApp } from 'vue'
// 全局引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
 
const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

2. The second method is to use partial Introduction

Local introduction means that a certain component is used to introduce a certain component during development.

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </div>
</template>
<script>
import { defineComponent } from &#39;vue&#39;
// 局部引入
import { ElButton } from &#39;element-plus&#39;
import &#39;element-plus/theme-chalk/el-button.css&#39;
import &#39;element-plus/theme-chalk/base.css&#39;
export default defineComponent({
  components: { ElButton },
  setup() {
    return {}
  }
})
</script>
 
<style></style>

But in this way, we have to manually introduce the corresponding component into the component every time we use it during development. css style, it will be more troublesome to use

3. Automatically introduce element-plus on demand. Recommendation

Need to installunplugin-vue-components and unplugin- auto-importThese two plug-ins

npm install -D unplugin-vue-components unplugin-auto-import

After the installation is completed, configure it in the vue.config.js file

// vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
  outputDir: './build',
  // 和webpapck属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus，
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [ElementPlusResolver()]
        })
      ]
  }
}

After the configuration is automatically introduced on demand, It can be used directly in the component without reference or registration. It has been automatically moved into the Element-plus component on demand and used directly:

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </div>
</template>
<script>
import { defineComponent } from &#39;vue&#39;
export default defineComponent({
  setup() {
    return {}
  }
})
</script>
 
<style></style>

Effect:

Extension:

Method 1, Global reference (all components are integrated)

Advantages: Integration is relatively simple

Disadvantages: All components and styles will be packaged, large volume

Usage: npm install element-plus --save

In main.ts, reference the js and css files

Take the About.vue page as an example, just use the relevant components directly in the page. The components have been globally registered by default and do not need to be re-registered in the page

##Method 2: Local reference(reference on demand)

Advantages: The package will be smaller

Disadvantages: Quoting is more troublesome

Usage 1: Use About Take the .vue page as an example, reference the js file in the page, register the component locally, the style is still a global reference, the official recommendation is

##【Related recommendations:

javascript video tutorial

, vue.js tutorial】

The above is the detailed content of Global introduction and local introduction of Element-plus into vue (with code). For more information, please follow other related articles on the PHP Chinese website!