这是我参与「第四届青训营」笔记创作活动的第1天

1.Elment-Plus是干什么的？

Element-Plus是用Vue3开发项目时，经常会使用到的一个丰富的非常好用的组件库，是为了适配 Vue 3 对 Element UI 进行的重构，解决了之前Vue3使用原来的Elment UI出现的许多bug，和Vue3适配性良好。

2.Element-Plus的全局引用

优点：方法简单粗暴，不会出问题

缺点：因为实际使用到的组件肯定不会个个都用上，但是由于是全局引入，项目打包上线会将所有ElementPlus中的包给算进来，导致占用空间会增加，负担过重

步骤如下：

1.安装Element-Plus: npm install element-plus

2.在main.ts中导入：

   import { createApp } from 'vue';
   import App from './App.vue';
   import ElementPlus from 'element-plus';
   import 'element-plus/dist/index.css';
   
   const app = createApp(App);
   app.use(ElementPlus);
   app.mount('#app');

3.在组件中使用：

    <template>
        <el-button>全局引入ElementPlus按钮</el-button>
    </template>

3.Element-Plus的按需引入

优点：即用即拿，节约空间

缺点：引入麻烦，不太方便

步骤如下：

1.安装Element-Plus:npm install element-plus

2.在main.ts中导入：

   import { createApp } from 'vue';
   import App from './App.vue';
   
   import 'element-plus/dist/index.css';
   import {
  ElAlert,
  ElAside,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio
} from 'element-plus/lib/index';
    
   const app = createApp(App);
   
   const components = [ElAlert, ElAside, ElButton, ElForm, ElFormItem, ElInput, ElRadio];
   for (const component of components) {
    app.component(component.name, component);
  }
   app.mount('#app');

一定注意按需引入的文件夹目录，因为现在更新了之后，大家按照原来的文件夹目录到时候跑起来肯定会出错，显示找不到文件夹，可以自己查看node_modules下面的element-plus文件夹，现在index.css是放到dist文件下,再需要非常关注的是element-plus/lib/index这个目录，我也是找了好久才跑成功，不能直接用element-plus或者其他路径

components这个数组里面放的就是你项目中需要引入的组件，我这只是举个例子，大家可以适当添加或者删改

3.在组件中使用：

    <template>
        <el-form>
            <el-button>按需引入ElementPlus按钮</el-button>
        </el-form>
    </template>