Vite按需引入elementplus

小白开始写自己的第一个项目，结果在引入element库就频频受挫otz

总结一下遇到的问题：

npm i element-ui -S报错

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: funfund@0.0.0
npm ERR! Found: vue@3.4.21
npm ERR! node_modules/vue
npm ERR!   vue@"^3.4.21" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from element-ui@2.15.14
npm ERR! node_modules/element-ui
npm ERR!   element-ui@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. 
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\26557\AppData\Local\npm-cache\_logs\2024-03-20T02_38_58_639Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\26557\AppData\Local\npm-cache\_logs\2024-03-20T02_38_58_639Z-debug-0.log

奇奇怪怪的，一点都看不懂耶（），

解决办法：

更换成以下代码

npm install element-plus --save

（据说是因为npm版本问题，使用elementplus就可以了，vue2不会报错）

谁偷了我的babelrc

官方文档说要在.babelrc中修改配置以达到按需引入，结果本小白看了一圈以后发现：嗯？！什么babelrc，在哪里呀？后来看见有个博客说改名成babel.config.js了，好吧，还是没找到╮(╯-╰)╭

老老实实按小兔鲜给的套路来了

解决办法：
打开终端，输入以下代码

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

然后在vite.config.js文件里添加如下代码：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

并在plugins选项中的vue()后面添加如下配置：

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({//1.配置elementPlus采用sass样式配色系统
      resolvers: [ElementPlusResolver()],
    }),

let's测试！

在App.vue文件中删除template标签中所有内容

更新成：

<template>
  <el-button type="primary">Primary</el-button>
</template>

完成啦~