element-ui按需引入

1. 安装

npm i element-ui -S
// 按需引入需要用到的插件
npm install babel-plugin-component -D

2.然后，将 .babelrc 或vue.config.js修改为：

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
// 如果是vue.config.js则要再包一层
configureWebpack：{plugins:[]}

3.全局按需引入

// 这个样式都要在这里引入
import 'element-ui/lib/theme-chalk/index.css';
// 按需引入按钮
import { Button } from 'element-ui';
Vue.component(Button.name, Button); //这里的Button.name就是ElButton
// 或 Vue.use(Button)

4.单独在组件中引入

import { Button } from 'element-ui';
// 注册
components:{
ElButton:Button 
}

关于vite和element-plus和node版本的问题，node版本要大于v14.17.6。就可以用npm create vite@latest去创建vite项目。和使用element-plus的自动导入的插件。不然会报错。

npm create vite@latest