学习目标:
本篇博客记录我6-30与7-01两天的学习工作。
- 尝试使用Vue+ElementUI制作登录界面
- 配置路由router
学习内容:
学习参考链接为Vue+ElementUI制作用户登录页面
(一)配置ElementUI
在命令行中执行如下命令
在项目main.js中插入如下代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
在package.json中增加上这个,并编译一下,成功。
(二)配置router
按照Vue项目配置router的指导来一步步对项目进行配置。
在main.js中增加如下代码:
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router=new VueRouter({
routes:[
//{path:"/",component:home},
//{path:"/about",component:about}
{path:"/",component:Login}
]
})
然后再在App.vue中增加如下代码:
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {
},
data () {
return {}
}
}
</script>
(三)写登录界面
在component下新建Login.vue文件,输入如下内容:
<template>
<div>
<!--flex弹性盒子模型,justify-content:主抽 -->
<div style="display: flex;justify-content: center;margin-top: 150px">
<el-card style="width: 400px">
<div slot="header" class="clearfix">
<span>登录</span>
</div>
<table>
<tr>
<td>用户名</td>
<td>
<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
<!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
</td>
</tr>
<tr>
<!-- 占两行-->
<td colspan="2">
<!-- 点击事件的两种不同的写法v-on:click和 @click-->
<!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
<el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
</td>
</tr>
</table>
</el-card>
</div>
</div>
</template>
<script>
export default {
//单页面中不支持前面的data:{}方式
data() {
//相当于以前的function data(){},这是es5之前的写法,新版本可以省略掉function
return{
//之前是在里面直接写username,password等等,但是这里要写return
//因为一个组件不管要不要被其他组件用,只要这样定义了,它就会认为可能这个组件会在其他的组件中使用
//比如说在这里定义了一个变量,然后把这个组件引入到A组件中,A组件中修改了这个变量
//同时这个组件也在B组件中引用了,这时候A里面一修改,B里面也变了,它们用的是一个值
//可是一般来说可能希望在不同的组件中引用的时候,使用不同的值,所以这里要用return
//这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
user:{
username:'zhangsan',
password:'123',
//为了登录方便,可以直接在这里写好用户名和密码的值
}
}
},
methods:{
doLogin(){//一点击登录按钮,这个方法就会执行
alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
}
}
}
</script>
(四)编译运行
运行截图如下
学习总结:
初步掌握了使用Vue开发页面的技术。
今后学习计划:
将细致讨论需求并形成完整的需求文档。