element ui框架（登录窗口）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        前面说到了路由，有了这个功能，其实后面的工作就比较好开展了。一般来说，很多网页项目都是这样的，首先进入的是登录窗口，在输入用户名和密码之后，就可以进入主页面了。所以，登陆页面本身也是非常重要的一个环节。

        窗口编写的过程中涉及到node-sass、sass-loader的安装，这是因为涉及到css的编写，这部分需要注意下。

1、创建登录工程，注意选中router功能

vue init ./webpack login

2、安装element ui

cd login
npm install element-ui -S

3、安装其他node_modules，并执行

npm install
npm run dev

4、将element ui添加到项目中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '',
  render:h=>h(App)
})

5、删除原来HelloWorld相关的功能

5.1 删除App.vue中图片的内容、删除样式

<template>
  <div id="app">
 
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
</style>

5.2 删除HelloWorld.vue中显示的内容，仅保留一个基本框架

<template>
</template>
 
<script>
export default {
  name: 'HelloWorld'
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

6、创建view目录

6.1 添加Login.vue

<template>
	<div>Login</div>
 
</template>
 
<script>
 
export default {
	name: "Login"
}
 
</script>
 
<style scoped>
</style>

6.2 添加Main.vue，其实和Login.vue差不多

<template>
	<div>Main</div>
 
</template>
 
<script>
 
export default {
	name: "Main"
}
 
</script>
 
<style scoped>
</style>

6.3 修改router/index.js，将Login和Main插入到路由表中

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/view/Login'
import Main from '@/view/Main'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
      path: '/Login',
      name: 'Login',
      component: Login
    },
	{
      path: '/Main',
      name: 'Main',
      component: Main
    }
  ]
})

6.4 输入127.0.0.1:8082/#/Login和127.0.0.1:8082/#/Main来进行验证。

7、准备利用element ui组件来修饰Login.vue

7.1 因为编写的过程中涉及到style的编写，所以需要安装node-sass、sass-loader

npm install node-sass@4.13.1  --registry=http://registry.npm.taobao.org
npm install sass-loader@7.3.1  --registry=http://registry.npm.taobao.org

7.2 修改Login.vue

<template>
	<div>
		<el-form ref="form" :model="form"  :rules="rules" class="login-box">
			<h3 class="login-title">欢迎登陆</h3>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="form.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('form')">确定</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
	</div>	
</template>
 
<script>
 
export default {
	name: "Login",
	data() {
		return {
			form:{
				name:'',
				password:''
			},
			rules:{
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请选择密码', trigger: 'change' }
				]
			}
		}
	},
	methods:{
		submitForm(formName) {
			//alert('submit!');
			
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$router.push("/Main");
				} else {
					this.$message.error('请输入正确用户名或密码!');
					return false;
				}
			});
		}
	}
}
 
</script>
 
<style lang="scss"	scoped>
	.login-box{
		width: 350px;
		margin:120px auto;
		border:1px solid #DCDFE6;
		padding:20px;
		border-radius:5px;
		box-shadow:0 0 30px #DCDFE6;
	}
	.login-title{
		text-align: center;
	}
</style>

8、测试网页

        有了上面这些操作，在npm run dev运行后，就可以看到不错的登录框效果了，