前端学习（六）页面编写——入门_前端页面编写

前面几篇都是讲的配置类的东西，前端的界面还没涉及，写前端的页面也是个很需要耐心的活，本文讲入门写一些最简单的东西。
这里以写一个最简单的登录界面为例子，采用的样式组件是elementUI。

安装及引入element

安装：

npm i element-ui -g
1

引入样式到项目中

分两种引入方式：完整引入和按需引入，这里为了简单，就先完整引入。
在main.js文件中：

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import ElementUI from 'element-ui'; // 引入组件
import 'element-ui/lib/theme-chalk/index.css'  // 引入样式

Vue.use(ElementUI); // 启用组件

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

PS：按需引用可参考官方文档

编写登录页面

首先在components文件夹下新建文件夹“login”，并在其下新建“login.vue”，我们就在这个文件下写登录页面。
怎么开始呢，我在百度直接搜“vue element 登录界面”，然后就参考着写。

<template>
  <div>
    <span>账号：</span>
    <el-input  placeholder="请输入手机号或邮箱" class="myInput"></el-input>
    <span>密码：</span>
    <el-input placeholder="请输入密码"  show-password class="myInput"></el-input>
    <el-button>登录</el-button>
  </div>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped>
span {
  color: black;
}
.myInput {
  width: 300px;
  height: 50px;
  margin: 50px 100px;
}
</style>
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

然后在router中绑定：

        {
            path: '/login',
            name: 'login',
            component: login
        },
1
2
3
4
5

然后访问：http://localhost:8080/login，画面却是这样的：

他怎么在同一行不会换行呢？继续查资料，html5用<p>做段落区分，那我就用他吧，template代码改成如下：

<template>
  <div>
    <p><span>账号：</span>
    <el-input  placeholder="请输入手机号或邮箱" class="myInput"></el-input></p>
    <p><span>密码：</span>
    <el-input placeholder="请输入密码"  show-password class="myInput"></el-input></p>
    <p>
      <el-button>登录</el-button>
    </p>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

看图：

确实换行了，但是行距也太大了，所得调style：

<style scoped>
span {
  color: black;
}
.myInput {
  width: 300px;
  height: 50px;
}
.myP{
  height: 50px;
  margin:0 auto; // 垂直居中
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

这样效果就稍微正常点了：

现在就做了这么个界面，什么功能都还没有，后面陆续完善。
调样式还是挺折腾人的，我觉得应该有更简单的方法，没找对姿势，后面有发现在记录下来。