Vue 项目中使用 Element UI库（Element UI 是一套基于 Vue.js 的桌面端组件库）

1. 安装 Element UI

 npm install element-plus@next

2.引入 Element UI（在main.js中引入组件,注意要引入.css文件，图标也要单独引用）

 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import elementIcon from "./plugins/icons";
 import { createPinia } from 'pinia'
 import axios from "axios"
 // import './style.css'
 import router from './router'
 import App from './App.vue'
 ​
 const pinia = createPinia()
 const app = createApp(App);
 ​
 app.use(ElementPlus);
 app.use(router);
 app.use(pinia);
 app.use(elementIcon);
 app.config.globalProperties.$axios = axios
 ​
 app.mount('#app')

3.使用 Element UI 组件：在 Vue 组件中即可使用 Element UI 提供的各种组件

 <template>
     <el-form :model="user" label-width="120px" id="login">
         <el-form-item label="用户名" for="username">
             <el-input v-model="user.username" id="username" placeholder="请输入用户名" />
         </el-form-item>
 ​
         <el-form-item label="密码" for="password">
             <el-input v-model="user.password" id="password" placeholder="请输入密码" />
         </el-form-item>
         <el-button @click="login" margin="0 auto">登录</el-button>
     </el-form>
 </template>

4.按需加载：Element UI 也支持按需加载，以减小项目的体积。可以使用 babel-plugin-component 或者 babel-plugin-import 等工具来实现按需加载（做优化，可以不用）

 // babel.config.js
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ],
   plugins: [
     [
       'import',
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
           return `element-plus/lib/theme-chalk/${name}.css`;
         }
       },
       'element-plus'
     ]
   ]
 };
 ​