前面几篇都是讲的配置类的东西,前端的界面还没涉及,写前端的页面也是个很需要耐心的活,本文讲入门写一些最简单的东西。
这里以写一个最简单的登录界面为例子,采用的样式组件是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>
这样效果就稍微正常点了:
现在就做了这么个界面,什么功能都还没有,后面陆续完善。
调样式还是挺折腾人的,我觉得应该有更简单的方法,没找对姿势,后面有发现在记录下来。