Vue高仿饿了么项目（3）—页面骨架开发

根据页面设计和组件拆分确定页面骨架开发，由于基于组件化的开发方式，把App.vue看成是页面得大的组件，大组件包括头部，导航区（控制内容区的切换），内容区包括商品、评价、商家这三个区块，这三个区块的切换会基于vue-router来实现。

---

组件划分

首先在App.vue的template层里面划分好三个大区块，即头部区块、导航区块、内容区块。

<div class="header">
    I am header!
div>
<div class="tab">
    I am tab!
div>
<div class="content">
    I am content!
div>

接下来完成组件的引用，从父组件引用子组件。需要在App.vue中的script层里面去注册子组件。

import header from './components/header/header.vue'
export default {
  components: {
    'v-header': header //对header的注册
  }
}

如果直接使用header会报出一个警告，与原生标签名字相同，所以标签使用v-header。
export是否加default的区别：
在父组件引用过子组件后需要在子组件出口，在header.vue中的script层里编写export default {}，这样就可以通过使用来代替

了，相当于在父组件引用子组件就成功了。

导航区块

导航区块内容

导航区块包括三部分，商品、评论、商家。首先完成内容部分。

<div class="tab">
    <div class="tab-item">商品div>
    <div class="tab-item">评论div>
    <div class="tab-item">商家div>
div>

接下来完成它的样式部分。它是水平排列、三等分的布局。运用到移动端非常经典的flex布局

导航区块路由实现

在main.js中引入并注册vue-router

第一步：把 vue-router 的 export 值赋值给变量 VueRouter 。

第二步：如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)，这样才能成功安装路由功能。

第三步：定义（路由）组件。可以从其他文件 import 进来。

第四步：定义路由。每个路由应该映射一个组件。 其中”component” 可以是通过 Vue.extend() 创建的组件构造器，或者只是一个组件配置对象。

第五步：创建 router 实例，然后传 routes 配置。

第六步：创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能。

第七步：使用 router.push 设置打开项目后默认显示商品页面。

import VueRouter from 'vue-router'

// 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
Vue.use(VueRouter)

//定义路由,每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，
//或者，只是一个组件配置对象。我们晚点再讨论嵌套路由
const routes = [
  {path: '/goods', component: goods},
  {path: '/ratings', component: ratings},
  {path: '/seller', component: seller}
]

//创建 router 实例，然后传 routes 配置,你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  linkActiveClass: 'active',
  routes  //（缩写）相当于 routes: routes
})

//创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
let vRouter = new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
Vue.use({
  vRouter
})

//能够实现第一个默认页面是ratings页面
router.push('/ratings') 

原来App.vue中使用 router-link 组件来进行商品、评价及商家这三个页面的导航，通过传入 to 属性指定链接，最后通过将路由匹配到的组件渲染在内容区。内容修改为

<div class="tab border-1px">
   <div class="tab-item">
       
       
       
      <router-link to="/goods">商品router-link>
    div>
    <div class="tab-item">
      <router-link to="/ratings">评论router-link>
    div>
    <div class="tab-item">
      <router-link to="/seller">商家router-link>
    div>
  div>
  <router-view>router-view>
div>

相关知识

1. vue-router
2. 关于router-go的改变
3. 关于 v-link-active 的替换
4. 关于 linkActiveClass 的设置
5. 设备像素比相关知识