使用Vue写一个登录页面

上一博客讲到构建了一个vue项目，现在在那个项目之上实现一个登录页面。

1.构建项目的目录

2.App.vue

1. <template>
2. <div id=“app”>
3. <router-view/>
4. </div>
5. </template>
7. <script>
8. export default {
9. name: ‘App’
10. }
11. </script>

main.js

1. // The Vue build version to load with the `import` command
2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3. import Vue from ‘vue’
4. import App from ‘./App’
5. import router from ‘./router’
7. import ElementUI from ‘element-ui’
8. import ‘element-ui/lib/theme-chalk/index.css’
10. //自己写的样式
11. import ‘./style/theme.css’
12. import ‘./style/characters.css’
14. // 注册element-ui
15. Vue.use(ElementUI)
17. Vue.config.productionTip = false
19. /* eslint-disable no-new */
20. new Vue({
21. el: ‘#app’,
22. router,
23. components: { App },
24. template: ‘<App/>’
25. })

theme.css

1. body {
2. padding: 0;
3. margin:0;
4. font-family: “Microsoft YaHei UI Light”;
5. }
7. .outer_label {
8. position: relative;
9. left: 0;
10. top: 0;
11. width: 100%;
12. height: 220px;
13. background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 – 6.0 */
14. background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 – 12.0 */
15. background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 – 15 */
16. background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
17. /*background-color: #000099;*/
18. text-align: center;
19. filter: brightness(1.4);
20. }
21. .inner_label {
22. position: absolute;
23. left:0;
24. right: 0;
25. bottom: 0;
26. top:0;
27. margin: auto;
28. height: 50px;
29. }
30. .qxs-icon {
31. height: 40px;
32. width: 90%;
33. margin-bottom: 5px;
34. padding-left: 10%;
35. border: 0;
36. border-bottom: solid 1px lavender;
37. }

character.css

1. .text-size12px{
2. font-size: 12px;
3. }
4. .text-size14px{
5. font-size: 14px;
6. }
7. .text-size16px{
8. font-size: 16px;
9. }
10. .float-right {
11. float: right;
12. }
13. .item-color {
14. color: #848487;
15. }

index.js

1. import Vue from ‘vue’
2. import Router from ‘vue-router’
3. // import HelloWorld from ‘@/components/HelloWorld’
4. import Login from ‘@/components/login/Login’
6. Vue.use(Router)
8. export default new Router({
9. routes: [
10. {
11. path: ‘/’,
12. name: ‘Login’,
13. component: Login
14. }
15. ]
16. })

Login.vue

1. <template>
2. <div>
3. <div class=“outer_label”>
4. <img class=“inner_label login_logo” src=“../../assets/logo.png”>
5. </div>
6. <div class=“login_form”>
7. <input type=“text” class=“qxs-ic_user qxs-icon” placeholder=“用户名” v-model=“userName”>
8. <input type=“text” class=“qxs-ic_password qxs-icon” placeholder=“密码” v-model=“password”>
9. <!–<button class=”login_btn el-button el-button&#45;&#45;primary is-round” type=”primary” round>登录</button>–>
10. <el-button class=“login_btn” @click.native=“login” type=“primary” round :loading=“isBtnLoading”>登录</el-button>
11. <div style=“margin-top: 10px”>
12. <span style=“color: #000099;” @click=“login”>司机账号登陆</span><span style=“float: right;color: #A9A9AB”>忘记密码？</span>
13. </div>
14. </div>
15. </div>
16. </template>
20. <script>
21. // import { userLogin } from ‘../../api/api’;
23. export default {
24. data() {
25. return {
26. userName: ”,
27. password: ”,
28. isBtnLoading: false
29. }
30. },
31. created () {
32. if(JSON.parse( localStorage.getItem(‘user’)) && JSON.parse( localStorage.getItem(‘user’)).userName){
33. this.userName = JSON.parse( localStorage.getItem(‘user’)).userName;
34. this.password = JSON.parse( localStorage.getItem(‘user’)).password;
35. }
36. },
37. computed: {
38. btnText() {
39. if (this.isBtnLoading) return ‘登录中…’;
40. return ‘登录’;
41. }
42. },
43. methods: {
44. login() {
45. if (!this.userName) {
46. this.$message.error(‘请输入用户名’);
47. return;
48. }
49. if (!this.password) {
50. this.$message.error(‘请输入密码’);
51. return;
52. }
54. }
55. }
56. }
57. </script>
58. <style>
59. .login_form {
60. padding-top: 10%;
61. padding-left: 10%;
62. padding-right: 10%;
63. }
64. .qxs-ic_user {
65. background: url(“../../assets/login/ic_user.png”) no-repeat;
66. background-size: 13px 15px;
67. background-position: 3%;
68. }
69. .qxs-ic_password {
70. background: url(“../../assets/login/ic_password.png”) no-repeat;
71. background-size: 13px 15px;
72. background-position: 3%;
73. margin-bottom: 20px;
74. }
75. .login_logo {
76. height: 100%;
77. }
78. .login_btn {
79. width: 100%;
80. font-size: 16px;
81. background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 – 6.0 */
82. background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 – 12.0 */
83. background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 – 15 */
84. background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
85. filter: brightness(1.4);
86. }
87. </style>

ic_password.png

ic_user.png

logo.png

3.根据npm run dev 命令启动，启动完成之后会有个链接，访问链接就直接可以看到下面页面：

问题交流群，不定期分享各种技术文档：

QQ群号：464512055

群二维码：

这是一个神器的二维码，扫描之后你会少掉一块钱。