Vue-Element前端页面快速构建

1.环境需求

1.Node.js下载 | Node.js 中文网 (nodejs.cn)](https://nodejs.cn/download/)

安装方式自行寻找

2.配置npm环境

2.构建Vue项目

在需要创建Vue脚手架的目录下打开cmd命令输入

1
vue create [项目名]

在弹出的命令行中选择Vue3进行回车安装

vueinsert.png

再输入npm run serve，即可成功运行vue项目

1
npm run serve

打开浏览器输入http://localhost:8080/即可访问vue的页面了

pig01.png

使用以下命令安装ElementUI

1
npm i element-ui -S

在项目的main.js中的内容增加对Elment的引入

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

接下来就可以到Element官网Element - 网站快速成型工具寻找自己需要的素材类型了

3.使用Element-UI快速创建一个登入页面

3.1.Element页面的创建

在Views目录下创建一个Vue界面，取名为Login.Vue，Vue界面包含三大主要的元素：

1
2
3
4
5
6
7
8
9
<template>
	//在此添加组件的主要代码
</template>
<style>
	//对界面元素的样式做更改
</style>
<script>
	//编写页面中的js代码
</script>

通过访问组件 | Element其中的添加两个输入输入框和一个按钮后的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div id="login-background">    
      <div id="login">
          <el-card class="box-card">
              <div id="form">
                  <el-input v-model="username" placeholder="请输入用户名"></el-input>
                  <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                  <el-button type="primary" v-on:click="login">登入</el-button>

              </div>
          </el-card>
      </div>
  </div>
</template>

为其中的两个输入框绑定源，否则无法输入内容

1
2
3
4
5
6
7
8
9
10
11
<script>
export default {
data() {
  return {
    username: "",
    password: "",
    time: "",
    date: "",
  };
},
</script>

为页面添加样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#login {
  position: absolute;
  top: 30%;
  left: 38%;
}
#copyright{
  color:wheat;
  position: absolute;
  top: 95%;
  left: 47%;
}
.el-card {
  height: 273px;
  width: 500px;
  background-color: rgb(255, 255, 255, 0.4);
  border-radius: 15px;
}

#form {
  line-height: 80px;
  padding-left: 15px;
  padding-right: 15px;
}

.el-button {
  font-size: 15px;
}

这样就可以得到一个简易的登入界面

登入界面

3.2页面添加一定的美化元素

添加一个logo和显示实时时间的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="logo">
      From KD_13
</div>
<div id="clock">
<div id="time">
     {{time}}
</div>
<div id="date">
     {{date}}
</div>
</div>
<div id="copyright">
     Copyright © 2024 Kd_13
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#login {
  position: absolute;
  top: 30%;
  left: 38%;
}
#time{
  font-size: 100px;
}
#date{
  font-size: 35px;
}
#clock{
  color:wheat;
  position: absolute;
  top:80%;
  left: 5%;
  text-align: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
methods: {
  update_clock() {
    const that = this;
    setInterval(function() {
      var d = new Date();
      var year = d.getFullYear();
      if (year < 10) {
        year = "0" + year;
      }
      var mon = d.getMonth();
      if (mon < 10) {
        mon = "0" + mon;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      var hou = d.getHours();
      if (hou < 10) {
        hou = "0" + hou;
      }
      var min = d.getMinutes();
      if (min < 10) {
        min = "0" + min;
      }
      that.time = hou + ":" + min;
      that.date = year + "/" + mon + "/" + day;
    }, 1000);
},

3.3对按钮进行事件绑定

<el-button type=”primary” v-on:click=”login”>登入

其中标红的元素代表事件名称

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
login:function(e){
  this.$axios({
    url:"#数据提交地址",
    method: "#数据提交方式",
    data:{
      username:this.username,
      password:this.password,
    },
  })
    .then((res)=> {
      console.log(res.data);
     //后端返回参数进行前端回显
    })
    .catch((err) =>{
    //错误信息
      console.log(err);
    });
  }
}
};

3.4 Login.vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
  <div id="login-background">
      <div id="logo">
          From KD_13
      </div>
      <div id="login">
          <el-card class="box-card">
              <div id="form">
                  <el-input v-model="username" placeholder="请输入用户名"></el-input>
                  <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                  <el-button type="primary" v-on:click="login">登入</el-button>

              </div>
          </el-card>
      </div>
      <div id="clock">
          <div id="time">
              {{time}}
          </div>
          <div id="date">
              {{date}}
          </div>
      </div>
      <div id="copyright">
          Copyright © 2024 Kd_13
      </div>
  </div>
</template>
<style scoped>

@keyframes myanimation {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

#logo {
  font-size: 40px;
  color: white;
  position: absolute;
  font-weight: 800;
  top: 15%;
  left: 15%;
}

#login {
  position: absolute;
  top: 30%;
  left: 38%;
}
#copyright{
  color:wheat;
  position: absolute;
  top: 95%;
  left: 47%;
}
.el-card {
  height: 273px;
  width: 500px;
  background-color: rgb(255, 255, 255, 0.4);
  border-radius: 15px;
}

#form {
  line-height: 80px;
  padding-left: 15px;
  padding-right: 15px;
}

.el-button {
  font-size: 15px;
}
#time{
  font-size: 100px;
}
#date{
  font-size: 35px;
}
#clock{
  color:wheat;
  position: absolute;
  top:80%;
  left: 5%;
  text-align: left;
}
</style>
<script>
export default {
data() {
  return {
    username: "",
    password: "",
    time: "",
    date: "",
  };
},
mounted() {
  this.update_clock();
},
methods: {
  update_clock() {
    const that = this;
    setInterval(function() {
      var d = new Date();
      var year = d.getFullYear();
      if (year < 10) {
        year = "0" + year;
      }
      var mon = d.getMonth();
      if (mon < 10) {
        mon = "0" + mon;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      var hou = d.getHours();
      if (hou < 10) {
        hou = "0" + hou;
      }
      var min = d.getMinutes();
      if (min < 10) {
        min = "0" + min;
      }
      that.time = hou + ":" + min;
      that.date = year + "/" + mon + "/" + day;
    }, 1000);
},
login:function(e){
  this.$axios({
    url:"#数据提交地址",
    method: "#数据提交方式",
    data:{
      username:this.username,
      password:this.password,
    },
  })
    .then((res)=> {
      console.log(res.data);
     //后端返回参数进行前端回显
    })
    .catch((err) =>{
    //错误信息
      console.log(err);
    });
  }
}
};
</script>

3.5页面预览

time2.jpg

4.报错

err01.png

这类报错是版本不兼容的原因导致的

  1. npm ERR! code ERESOLVE：npm遇到的错误类型是”ERESOLVE”，即“依赖树解析错误”。

  2. npm ERR! ERESOLVE unable to resolve dependency tree：npm无法解析依赖树，即它无法确定项目中需要的各个依赖版本之间的关系。

  3. npm ERR! While resolving: hexotest@0.1.0：在尝试解析项目版本为0.1.0的hexotest时出现问题。

  4. npm ERR! Found: vue@3.4.27：项目中已找到vue版本为3.4.27。

  5. npm ERR! node_modules/vue：vue包存在于项目的node_modules目录中。

  6. npm ERR! vue@"^3.2.13" from the root project：项目根目录下的package.json文件中指定vue的版本为^3.2.13（意味着兼容3.2.13及其以上版本）。

  7. npm ERR! Could not resolve dependency:：无法解析依赖。

  8. npm ERR! peer vue@"^2.5.17" from element-ui@2.15.14：element-ui要求与之协同工作的vue版本为^2.5.17（意味着兼容2.5.17及其以上版本），但你安装的vue版本是3.4.27。

  9. npm ERR! node_modules/element-ui：element-ui包存在于项目的node_modules目录中。

  10. npm ERR! element-ui@"*" from the root project：项目根目录下的package.json文件中指定element-ui为任意版本。

  11. npm ERR! Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.：解决依赖冲突的上游问题，或者使用--force或--legacy-peer-deps重新尝试命令，以接受不正确（可能已损坏）的依赖解析。

  12. 安装Element Plus：

    1
    npm install element-plus -S