Element-UI在vue2中使用

### 如何在 Vue 2 中集成和使用 Element-UI 组件库 #### 安装依赖包 为了能够在 Vue 2 项目中使用 Element-UI，首先需要安装 `element-ui` 及其样式文件。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install element-ui --save ``` 或者 ```bash yarn add element-UI 接着，在项目的入口文件 `src/main.js` 中引入整个 Element-UI 库及其默认主题样式表，并将其挂载至 Vue 实例上[^1]： ```javascript import Vue from 'vue'; import App from './App.vue'; // 引入Element UI以及对应的css import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false; // 使用插件形式全局注册Element UI组件 Vue.use(Element); new Vue({ render: h => h(App), }).$mount('#app'); ``` 此时已经完成了基本配置工作，可以开始创建基于 Element-UI 组件的应用界面 假设要构建一个简单的登录页面，可以在相应的 `.vue` 文件内按照如下方式编写模板部分（template）、脚本逻辑(script) 和样式(style)[^2]: ```html <template> <div class="login-container"> <!-- 表单 --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form> </div> </template> <script> export default { data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { callback(); } }; return { ruleForm: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [{ validator: validatePass, trigger: 'blur' }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } }; </script> <style scoped> .login-container { width: 50%; margin: auto; } .demo-ruleForm { max-width: 460px; } </style> ``` 上述代码展示了如何利用 Element-UI 提供的各种输入框、按钮等基础控件来快速搭建起具有交互性的前端页面结构。