一、 Element-Plus的概念

就是简化了Vue开发网站，其中有许多组件，按钮，表单等等我们可以直接拿来使用

二、安装Element-Plus

（1）完整引入

//完整引入的命令
npm install element-plus --save

若是对于打包后的文件大小不在乎，那么使用完整引入更加方便

//首先第一步在main.js文件中导入element-plus需要的文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
//使用element-plus需要引入的文件
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';


createApp(App).use(store).use(ElementPlus).use(router).mount('#app')

//第二步直接去官网找你想要的效果的代码复制粘贴就行
//components文件夹下的helolo.vue


<template>
  <div class="hello">
    <h1>{
    
    { msg }}</h1>
    <el-row class="mb-4">
    <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-row>
  </div>
</template>

<script>
export default {
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

（2）按需引入

我们通常使用的是按需引入，因为真实开发中并不是每个组件都会用到

第一步需要安装一些配置，命令如下：
npm install -D unplugin-vue-components unplugin-auto-import

第二步是将下面的代码粘贴复制到vue.config.js配置文件中

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')


module.exports = defineConfig({
 transpileDependencies: true,
 configureWebpack: {
  plugins: [
   AutoImport({
    resolvers: [ElementPlusResolver()]
    }),
   Components({
    resolvers: [ElementPlusResolver()]
    })
   ]
  }
})

三、Vue3加载Element-Plus的字体图标

Vue3加载Element-Plus的其他内容不需要特别注意，只要复制粘贴即可，但是加载字体图标需要特别注意一下

第一步安装字体图标

npm install @element-plus/icons-vue

第二步在项目根目录下创建plugins文件夹，在文件夹下创建icons.js文件，并写如下代码


import * as components from "@element-plus/icons-vue";
export default {
  install: (app) => {
    for (const key in components) {
      const componentConfig = components[key];
      app.component(componentConfig.name, componentConfig);
     }
   },
};

在main.js文件引入如下

import elementIcon from "./plugins/icons";
app.use(elementIcon)

最后一步便是在官网上复制粘贴需要的效果的代码

Vue3加载Element-Plus

一、 Element-Plus的概念

二、安装Element-Plus

（1）完整引入

（2）按需引入

三、Vue3加载Element-Plus的字体图标

猜你喜欢