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">用户注册</el-link>
</div>
</el-col>
<</