先丢官网 添加链接描述
推荐一个不错的视频教程网站添加链接描述
进入正题
先说vue的页面布局
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
vue页面分为三个部分,template主要写html ,其余两个相信大家都懂。<“style scoped > 中的 scoped 主要是为了使其私有化,及当前样式只属于当下模块,不污染全局。
先说主页
<template>
<div id="app">
<el-container>
<el-header>
<Header />
</el-header>
<el-main>
<!-- TODO: main.vue -->
<router-view/>
</el-main>
</el-container>
</div>
</template>
电商网站中一般顶部是不变的,因此我们对整个架构先进行划分,即header