使用Vue写一个登录页面

使用某视频剪辑软件写一个登录页面

使用某视频剪辑软件写一个登录页面

上一博客讲到构建了一个某视频剪辑软件项目，现在在那个项目之上实现一个登录页面。

1.构建项目的目录

2.App.vue

模板

差异

路由器-视图/

/div

/模板

脚本

导出默认值{

名称： '应用'

}

/script

main.js

//使用"导入"命令加载的某视频剪辑软件构建版本

//(仅运行时或独立)已在webpack.base.conf中用别名设置。

从“vue”导入某视频剪辑软件

从""导入应用程序“/App”

从""导入路由器“/路由器”

从"元素-用户界面"导入元素用户界面

导入"元素-ui/lib/主题-粉笔/index.css "

//自己写的样式

"进口"。/style/theme.css '

"进口"。/style/characters.css '

//注册元素用户界面

Vue.use(ElementUI)

Vue.config.productionTip=false

/* ESL int-禁用无新功能*/

新Vue({ 0

el: '#app '，

路由器，

组件： { App }，

模板： 'App/'

})

主题。钢性铸铁

正文{

padd : 0；

余量：0

字体系列： '微软雅黑用户界面之光；

}。outer_label {

相对位置：

左： 0；

top : 0；

宽度： 100%;

高度： 220 px

背景：-网络套件-线性-渐变（左、#000099、# 2154 fa)；/* Safari 5.1 - 6.0 */

背景：-o-线性梯度（右、#000099、# 2154 fa)；/*歌剧11

.1 - 12.0 */

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"司机账号登陆/spanspan 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

群二维码：

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