上手vue2的学习笔记5之在vue2项目中调用elment-ui

**Vue2学习笔记5：在Vue2项目中调用Element-UI**

作为一个前端开发者，选择合适的UI组件库是非常重要的。Element-UI是一个非常流行且强大的UI组件库，它提供了大量的组件和工具来帮助我们快速构建高质量的Web应用。在本文中，我们将学习如何在Vue2项目中调用Element-UI。

### 安装Element-UI首先，我们需要安装Element-UI。我们可以使用npm或yarn命令来安装：

bashnpm install element-ui --save

或者：

bashyarn add element-ui

### 导入Element-UI在Vue2项目中，为了使用Element-UI的组件，我们需要导入它。在`main.js`文件中添加以下代码：

javascriptimport Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
 el: '#app',
 render: h => h(App)
})

### 使用Element-UI的组件现在，我们可以在Vue2项目中使用Element-UI的组件了。例如，我们可以使用`el-button`组件来创建一个按钮：

html<template>
 <div>
 <el-button type="primary">Primary</el-button>
 <el-button>Default</el-button>
 <el-button type="danger">Danger</el-button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data() {
 return {}
 }
}
</script>

<style scoped>
</style>

### 使用Element-UI的表单组件Element-UI提供了大量的表单组件，例如`el-form`、`el-form-item`等。我们可以使用这些组件来创建一个表单：

html<template>
 <div>
 <el-form :model="form" label-width="120px">
 <el-form-item label="Username">
 <el-input v-model="form.username"></el-input>
 </el-form-item>
 <el-form-item label="Password">
 <el-input type="password" v-model="form.password"></el-input>
 </el-form-item>
 <el-form-item>
 <el-button type="primary">Login</el-button>
 </el-form-item>
 </el-form>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data() {
 return {
 form: {
 username: '',
 password: ''
 }
 }
 }
}
</script>

<style scoped>
</style>

### 使用Element-UI的弹出层组件Element-UI提供了一个`el-dialog`组件，可以用来创建一个弹出层：

html<template>
 <div>
 <el-button @click="dialogVisible = true">Open Dialog</el-button>

 <el-dialog title="Dialog" :visible.sync="dialogVisible">
 <span>Content of dialog</span>
 <span slot="footer" class="dialog-footer">
 <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
 <el-button @click="dialogVisible = false">Cancel</el-button>
 </span>
 </el-dialog>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data() {
 return {
 dialogVisible: false }
 }
}
</script>

<style scoped>
</style>

### 总结在本文中，我们学习了如何在Vue2项目中调用Element-UI。我们安装了Element-UI，导入了它，并使用了它的组件，如`el-button`、`el-form`等。我们还学习了如何使用Element-UI的弹出层组件。希望这篇文章对你有所帮助！