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

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

安装及引入element

安装：

npm i element-ui -g

引入样式到项目中

分两种引入方式：完整引入和按需引入，这里为了简单，就先完整引入。 在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)

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>

然后在router中绑定：

{
          
   
            path: /login,
            name: login,
            component: login
        },

然后访问：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>

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

<style scoped>
span {
          
   
  color: black;
}
.myInput {
          
   
  width: 300px;
  height: 50px;
}
.myP{
          
   
  height: 50px;
  margin:0 auto; // 垂直居中
}
</style>

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