在之前的文章中，我们只写过HTML和JavaScript，并没有对页面进行过任何的美化，因此我们在写完页面的基本架构后就可以稍微写一下css了。
Vue中的CSS
Vue中的css全部都写在<style>里。如果你看过我们之前的代码，会发现其都是以<style scoped>的形式出现的，这便是组件作用域CSS。这会让组件中的样式只影响组件本身（在vue编译过程中会进行哈希化），不影响外部的其他组件，也不影响子组件（子组件的根节点除外，它会被父组件和子组件的css同时影响）。
我们先把顶部的导航栏封装成一个新的menuBar组件，并通过flex布局使其占据页面的整个顶部。
<script setup>
import {useRouter, useRoute} from 'vue-router'
import { useUserAccountStore } from '../stores/userAccount';
const router = useRouter();
const route = useRoute();
const userAccountStore = useUserAccountStore();
function routerTo(event){
const button = event.target;
router.push(button.dataset.to);
}
</script>
<template>
<div id="menu">
<button data-to = "/" @click="routerTo">主页</button>
<button data-to = "/login" @click="routerTo"
v-if="!userAccountStore.isLogged">登录</button>
<button data-to ="/register" @click="routerTo"
v-if="!userAccountStore.isLogged">注册</button>
<button data-to="/articleEditor" @click="routerTo" >创作中心</button>
<button v-if="userAccountStore.isLogged"
@click="userAccountStore.logout">退出登录</button>
</div>
</template>
<style scoped>
#menu{
height: 5vh;
width: 100vw;
}
button{
margin-left: 5vw;
margin-right: 5vw;
}
</style>
除了scoped关键字外，还有一个modules关键字，可以将对应的CSS编译成css-modules，也就是说可以作为一个$style属性暴露给组件，目前我们还用不到，等到需要的时候会在之后的文章中进行介绍。
flex布局
flex布局是css中最经典的布局之一了（另外一个是grid布局）。我们先来介绍flex布局的概念和一些属性。当一个元素被设置了flex样式时，它便成为了一个flex容器，其包含的所有元素都将会按照flex布局排列。flex是一个一维的布局，虽然是一维，但是其有两个轴，一个叫做主轴一个叫做交叉轴。主轴是元素排列的轴，而交叉轴垂直于它。
主轴的方向有四个，row、row-reverse、column和column-revserse，分别代表着flex布局中的元素排列方向从左到右，从右到左，从上到下和从下到上，通过修改flex-direction属性为对应的值来应用。
flex-wrap属性决定了其会不会换行，如果我们想让元素在主轴中溢出是换行，那么可以设置其flex-wrap属性为wrap。
我们在login组件中把所有的元素包裹在一个div元素中，然后使用竖版的flex布局。
<template>
<div class="informationInput">
<h1>注册</h1>
<h2>用户名</h2>
<input v-model="usernameInput"/>
<h2>密码</h2>
<input v-model="passwordInput"/>
<button @click="register">注册</button>
</div>
</template>
<style scoped>
.informationInput{
display: flex;
flex-direction: column;
}
</style>
会发现按钮和输入框被抻的很长，这是因为在flex布局的默认设置中，交叉轴的长度由最宽的元素决定，短的元素将会被拉长，因为其flex-basis属性被设为了auto（但是由于最终页面上整个VueAPP被包装在了一个id为#app的div下且其display属性为block，因此我们在这里修改flex-basis属性是没用的），因此设置其宽度即可。
.informationInput{
display: flex;
flex-direction: column;
}
.informationInput *{
width: 20vw;
margin-top: 3vh;
margin-bottom: 3vh;
}
不光在register组件中，在login组件中也可以应用同样的布局。由于我们没有设置scoped，因此在其他的组件中也是可以使用的。但是这样就会带来新的问题：组件是全局作用但其不具备全局位置。因此我们需要把其放在一个全局的位置以供调用。
通常来说css文件一般会放在assets文件夹中，我们在文件夹中创建一个main.css文件，用来存储所有的样式表，然后在main.js中进行引用就可以了。