element Steps组件的使用 element组件库

一、Element 插件

1. 找到要应用的插件

1）打开Element 官网：Element - The world's most popular Vue UI framework

2）下滑找到如图示画面，点击组件框

3） 找到组件目录，其下面都是可应用的组件，本文以组件目录下的Button 按钮为例

4）点击Button 按钮，下图页面，鼠标移动到页面框里，框底部会出现显示代码，点击显示代码即可复制所需代码到自己创建的项目里

 5）点击显示代码，选择你想复制的内容

 2.在项目里应用插件

  1）创建项目，项目目录如下：

 2）使用插件

App.vue

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>

</style>

 3)安装插件

安装插件有两种方法，一种是全部引入，另一种是按需引入

1.全部引入

终端安装：npm i element-ui -S

main.js文件中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

 

2.按需引入

安装 开发依赖：npm install babel-plugin-component -D

babel.config.js——在该文件里添加下面代码

plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

在main.js 中引入

import {Button,Row} from 'element-ui';
Vue.use(Button)
Vue.use(Row)

注意：{ }里面的内容是你要引入那几个部分的内容就填那几个部分，下面的组件同理

示例：

import {Button,Form,FormItem,Input,Col,Row,Message} from 'element-ui';Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)

以上是两种引入方式，但第二种按需引入方法需要注意一个点，就是终端里安装npm install babel-plugin-component -D 时，还要安装 npm i element-ui -S

二、登录界面示例

1.项目目录界面

 2.各组件部分完整代码

1.  assets\img目录下的图片及assets\style.css

 

 style.css

html,body,div,ul,p{
    margin: 0;
    padding: 0;
}
html,body,#app{
    height: 100%;
}
.l{
    float: left;
}
.r{
    float: right;
}
.c{clear: both;}

2.  components\Login.vue

<template>
	<div class="login_main">
		<div class="login_box">
			<!-- 登录左边广告框 -->
			<div class="l"></div>
			<!-- 登录右边表单 -->
			<div class="r">
				<h1>配音系统登录</h1>
				<el-form label-width="0px" :model="form" :rules="formRules" ref="formRef"> <!-- model 绑定数据  rules表单验证规则-->
				  <el-form-item prop="username"> <!-- 验证规则名称 -->
					  <!-- prefix-icon在前面加一个icon图标  -->
				      <el-input  prefix-icon="el-icon-s-custom" v-model="form.username"  placeholder="请输入用户名"></el-input>
				  </el-form-item>
				  
				  <el-form-item prop="password">
				      <el-input type="password" prefix-icon="el-icon-view"  v-model="form.password"  placeholder="请输入密码"></el-input>
				  </el-form-item>
				  
				  <el-form-item>
					  <el-row :gutter="10">
						  <el-col :span="16">
							  <el-input  prefix-icon="el-icon-view"  placeholder="请输入验证码"></el-input>
						  </el-col>
							
						  <el-col :span="8">
									 <el-input  prefix-icon="el-icon-view"  placeholder="请输入验证码"></el-input>
						 </el-col>
					 </el-row>
				  </el-form-item>
				  <el-button type="primary" class="button" @click="checkLogin">登录系统</el-button>
				</el-form>
				
			</div>
			<div class="c"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Login',
		data(){
			return {
				form:{
					username:'',
					password:''
				},
				formRules:{
					username:[
						{ required: true, message: '用户名不能为空', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '密码不能为空', trigger: 'blur' },
						{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			checkLogin(){
				this.$refs.formRef.validate((valid)=>{ //表单预验证码 true 为验证成功，false为失败
				       if(!valid)  return;
					   this.$http.get("admin",{params:this.form}).then(reponse=>{
						   
						   if(reponse.data.length==0){
							  return this.$message.error("用户名或者密码错误");
						   }else{
                               return this.$message.success("登录成功");		   
							   // 1:保存登录成功后的token,保存在sessionStorge中
						   }
					   }).catch(e=>{
						   console.log(e);
					   })
					  
				})
			}
		},
	}
</script>

<style scoped>
	.login_main{
		height: 100%;
		width: 100%;
		background: url(../assets/img/login_bg.jpg) no-repeat;
		background-size: cover;
	}
	.login_box{
		width: 900px;
		height:515px;
		background: #fff;
		box-shadow: 0px 0px 10px 5px #ddebfe;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		border-radius: 12px 0px 0px 12px;
	}
	.login_box .l{
		background: url(../assets/img/login_left.png) no-repeat;
        background-size: cover;
		width: 350px;
		height: 515px;
		border-radius: 12px 0px 0px 12px;
	}
	.login_box .r{
		width: 550px;
		box-sizing: border-box;
		padding: 30px;
	}
	h1{
		text-align: center;
		color: #4c4c4c;
	}
	.button{
		width: 100%;
	}
</style>

3.  plugins\element.js

import Vue from 'vue'
import {Button,Form,FormItem,Input,Col,Row,Message} from 'element-ui';

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
// 弹出框挂载到vue原型身上，这样每个组件都是用this.message
Vue.prototype.$message = Message

4.  router\index.js

import VueRouter from 'vue-router';
// 导入login组件
import Login from '../components/Login'
export default new VueRouter({
	 routes:[
		 // 注册组件
		 {path:'/',redirect:'/login'},
		 {path:'/login',component:Login}
	 ]
})

5.  App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>

</style>

6.  main.js

import Vue from 'vue'
import App from './App.vue'
import './assets/style.css'
Vue.config.productionTip = false

//引入插件
import './plugins/element'

// 引入路由文件
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

7.  babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.终端执行安装 

1. npm i vue-router@3
2. npm i element-ui -S
3. npm install babel-plugin-component -D
4. npm run serve

4.效果图