跟着项目学vue.js(七) 准备布局页(上)

接上文，开始准备布局页，见下图，包括顶部一个头部和一个底部导航。

1、在we-vue组件库中找到对应的组件 

1)头部，包括网站logo和【注册|登陆】按钮，这对应着we-vue组件库的Header组件

2）底部导航，包括【首页、所有商品、购物车、我】 四个菜单项，这对应着we-vue组件库的Tabbar组件

 这两个组件都位于官方文档的【导航相关】目录下，we-vue是所有基于weui样式库的Vue组件库中，文档最详尽的一个，文档做的非常舒服，不亚于Antd。

不同于PC端网站，移动端项目对组件库有很强的依赖性，是因为组件库能够提供更加专业的视觉和交互体验。而PC端一般只会在中后台项目中大量使用组件库，以满足其功能性需求。

在main.js文件中添加对we-vue样式表style.css的引用：

import Vue from 'vue';

import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/we-vue/lib/style.css';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

2、在components文件夹下创建Layout文件夹，并在该文件夹下分别创建Footer.vue和Header.vue单文件组件。

单文件组件：

 *.vue是Vue.js特有的文件格式，表示的就是一个Vue组件，被称为单页式组件。
            *.vue文件可以同时承载“视图模板”、“样式定义”和组件代码，它使得组建的文件组织更加清晰与统一。

单页组件由三部分组成：