上一篇文章中,我们正确启动了vue项目,现在我们开始写项目。
一. 创建页面的基本布局
1. App.vue文件
App.vue文件:单文件组件, .vue为后缀, 至少得有一个template
打开App.vue文件,修改代码,
<template>
<div id="app">
<div class="container">
<header class="header">头部</header>
<div class="content">内容</div>
</div>
<footer class="footer">底部</footer>
</div>
</template>
<script>
// 单文件组件 .vue为后缀 至少得有一个template
export default {
// 暴露该组件(要写js),如果不写script,会默认暴露出去
}
</script>
<style lang="scss">
// 导入SCSS文件
// @/lib/reset.scss 其中@表示的是src目录
@import '@/lib/reset.scss';
html, body, #app {
// width: 100%; height: 100%;
@include rect(100%,100%);
}
#app {
// dispaly: -webkit-box; display: -ms-flexbox; display: flex;
@include flexbox();
@include flex-direction(column);