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.jsmodule.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import',{libraryName: 'element-plus',customStyleName: (name) => {return `element-plus/lib/theme-chalk/${name}.css`;}},'element-plus']]};​