On-demand and global imports in Element-Plus

Global references and on-demand imports

Import on demand:

Installing a plug-in

First, additional plug-ins need to be introduced: the former **vite-plugin-components has been renamed unplugin-vue-components**

npm install unplugin-vue-components
Copy the code
Configure the plug-in

Add configurations to the appellate ACK or Vite configuration file

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
export default {
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
Copy the code
// webpack.config.js
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
​
module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
Copy the code
//main.ts
import { createApp } from 'vue'
import App from './App.vue'
​
import { Edit,Search } from '@element-plus/icons'  // Import ICONS separately as required
import { ElButton } from 'element-plus';   // Import as needed
​
const app = createApp(App);
// Register the component
app.component("edit", Edit)
app.component("search", Search)
app.component('ElButton',ElButton)
app.mount('#app');
Copy the code
<template>
    <h2>The home page</h2>
    <el-button type="primary" >The main button</el-button>
    <el-button type="success" >Successful button</el-button>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
    <el-icon :size="20">
        <search></search>
    </el-icon>
</template>
<script setup lang="ts"> 
</script>
Copy the code

Global import

Recommend to add

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}
Copy the code
The installation
npm install element-plus --save
# or
yarn add element-plus
​
#Install the Icon dependency library
npm install @element-plus/icons
# or
yarn add @element-plus/icons
Copy the code
Global configuration in main.ts file
import { createApp } from 'vue'
import App from './App.vue'
import { store, key } from './store';
// Inject a route
import router from './router';
​
// Import the UI library globally
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
​
const app = createApp(App);
app.use(store, key);
app.use(router);
app.use(ElementPlus);
app.mount('#app');
Copy the code
Using UI Components

Use ICONS, because ICONS and ordinary UI components are not in the same package and need to be imported separately

// Import specific components and use them directly
<template>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
</template>
<script setup lang="ts">
    import { Edit } from '@element-plus/icons'
</script>
Copy the code

Impott the icon library in the main.ts file and register it with app.component.ponent () to use it directly in components, just like using the normal UI library

<template>
    <h2>The home page</h2>
    <el-button type="primary" >The main button</el-button>
    <el-button type="success" >Successful button</el-button>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
    <el-icon :size="20">
        <search></search>
    </el-icon>
</template>
<script setup lang="ts"> 
</script>
Copy the code

If there is wrong hope big guy correct ao