</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
form: {
name: '',
password: ''
}
}
},
methods: {
onSubmit() {
},
},
}
</script>
<style>
</style>
7.sass
我们可以直接用css的，但是我不推荐这样用，因为原生太丑了。我们要使用css预处理器写css样式。css预处理器有sass和less，当然还有其他的但是我没用过。less我不推荐使用，因为功能不强、像自定义函数功能就没有，写代码特别别扭，我推荐sass。
安装sass
D:testbook>yarn add node-sass sass-loadervue-cli3 对sass简直是0配置，上面我们安装好处理器后，直接在style标签上加上
lang="scss" 就可以使用sass了。修改Login.vue中的style
<style lang="scss">
.login {
width: 100%;
height: 100%;
background: #000;
.l-form {
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 300px;
margin: auto;
border-radius: 8px;
background: #fff;
padding: 20px;
.l-tip {
text-align: center;
font-size: 24px;
font-weight: bold;
}
.el-form {
width: 100%;
margin: auto;
margin-top: 20px;
.el-form-item {
button {
width: 100%;
}
}
}
}
}
</style>样式跟我们想要的还有点差别，这是是因为父元素的样式问题引起的，修改App.vue中的style。主要是给html，body还有#app元素设置了宽和高和边距。
<template>
<div id="app">
<router-view></router-view>
</div>
</template><style lang="scss">
html,
body,
#app{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
再打开浏览器，看我们的页面，已经很好看了。页面长下面这样。
8.normalize.css
安装normalize.css 其实这个安不安装都可以，我是有强迫症就安装了。
安装
yarn add normalize.css修改main.js引入normalize.css。
配置
