在线商城项目02-展示商品列表页面并抽取公共组件

简介

本系列前期不过多关注样式，所以直接采用视频提供的重构。本篇主要进行如下工作：

1. 展示商品列表页面
2. 抽取公共组件

1. 展示商品列表页面

step1：新增存放重构资源的目录
视频提供的重构有点问题，大家可以使用我上传在github上的重构资源。
在根目录下新建一个resources文件夹，用来存放重构的资源文件。如果公司或者团队有专门的重构工程师，可以将这个文件夹交给他们管理。

如图，这里有红色和绿色，是因为有些文件我已经track了，而有的没有。使用webstorm你可以在新建文件的时候track，也可以自己过后手动track。我们打开goodsList.html，如下图：

step2：将重构页面资源引入src
在src下新增文件夹views，用来存放我们的页面文件。再在views下新建文件夹GoodsList，用来存放商品列表相关的文件。在GoodsList下新建一个GoodsList.vue文件。如图：

GoodsList.vue文件中放我们的重构内容：

这里需要注意两点：

1. template下面要有一个root element，所以我们加了一层div
2. 图片的引用地址改变了，我们将自己的logo.png替换assets下vue的logo，将产品图片文件放到static下。这里关于static和assets的不同可以看assets 和static的区别以及 webpack 模板的文档 - Handing Static Assets来了解。简而言之的话，就是 static/ 目录下的文件并不会被 Webpack 处理。

step3 修改路由文件router/index.js，将默认路由指向商品列表页。

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList/GoodsList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

step4 修改APP.vue，去掉style内容和style标签，去掉style标签是防止在头部生成多余的空标签。

step5 将resources/css文件夹copy到src/assets下，修改main.js，引入css文件。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import './assets/css/base.css'
import './assets/css/login.css'
import './assets/css/product.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

step6：重新运行我们的项目。如下：

到这里，我们已经能够在项目中展示重构提供的页面了。注意审查logo和商品图片，会发现logo是base64引入，而商品图片是地址引入。因为static/ 目录下的文件并不会被 Webpack 处理。

2. 抽取公共组件

vue很重要的思想就是组件化，对于网站的大多数页面而言，都会有头部，底部和面包屑。那么我们不妨把这三个部分抽取成项目的公共组件。

step1：抽取公共组件。在components文件夹下删除Hello.vue，新建三个vue文件如下：

将GoodList.vue文件中的header，footer和nav-breadcrumb-wrap分别剪切粘贴到对应的组件中。这里要注意，由于文件地址改变，对一些资源的引入地址也要相应改变，比如头部引入的logo.png。

step2: 引入公共组件
抽取出公共组建以后，如果页面需要这些组件，需要引入，注册以后使用。此时的GoodsList.vue代码如下：

step3：修改面包屑组件
之前我们的面包屑的二级目录固定写死为Goods，作为公共组件肯定是不可以的。所以我们需要使用插槽slot。
PageBread.vue作如下修改：

  Home
  

GoodsList.vue作如下修改：

      Goods
    

提交代码

好的，本篇的任务完成，我们添加文件并提交到github。步骤如下：

git status
git diff
git add .
git commit -am 'add views GoodsList and Components head foot bread'
git push