当前位置:   article > 正文

前端学习(六)页面编写——入门_前端页面编写

前端页面编写

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/610716
推荐阅读
相关标签
  

闽ICP备14008679号