简单操作SPA项目开发之登录注册功能

1. 操作步骤

话不多说，简单粗暴上步骤

1.1 新建项目

先新建一个spa项目
不懂如何创建点击链接进行查看

1.2 安装开发模块

打开cmd命令直接输入以下代码块
第一条
npm install element-ui -S

第二条
npm install axios -S

第三条
npm install qs -S

第四条
npm install vue-axios -S

安装完成会在你创建的项目中显示（package.json中）

1.3 引入min.js配置

在项目中 src 目录下找到 main.js ，并在指定位置添加三行代码（ main.js 是入口文件，所以在这里引入就行，页面就不用引入了）
import Vue from ‘vue’
import ElementUI from ‘element-ui’ // 新添加 1
import ‘element-ui/lib/theme-chalk/index.css’ // 新添加 2 ，避免后期打包样式不同，要放在import App from ‘./App’; 之前
import App from ‘./App’
import router from ‘./router’
Vue.use(ElementUI) // 新添加 3
Vue.config.productionTip = false

1.4 添加elementUI组件查看效果

在index.js里面配置组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'

Vue.use(Router)

export default new Router({
	routes: [{
			path: '/',
			name: 'Login',
			component: Login
		},
		{
			path: '/Login',
			name: 'Login',
			component: Login
		},
		{
			path: '/Reg',
			name: 'Reg',
			component: Reg
		}

	]
})

在Element官网里面找到组件找到按钮进行复制代码块测试

显示结果

2. Vue+ElementUI设计登陆页面

在element官网里面找到表单进行复制操作

2.1 修改界面

新建一个Login.vue,

界面样式代码块书写

<template>
	<!-- 调用样式 -->
	<div class="login-wrap">
		<h3 style="text-align: center;">用户登录</h3>
		<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm login-container">
			<el-form-item label="用户名" prop="uname">
				<el-input type="uname" v-model="ruleForm.uname" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pwd">
				<el-input type="pwd" v-model="ruleForm.pwd" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple-dark">
							<el-button type="primary" style="width: 200px;" @click="doSub">提交</el-button>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<div class="grid-content bg-purple-dark">
							<el-link type="success" @click="toReg