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

本文链接：https://blog.csdn.net/qq_20696879/article/details/81905062

根据页面设计和组件拆分确定页面骨架开发，由于基于组件化的开发方式，把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 {}，这样就可以通过使用<v-header></v-header>来代替<div class="header"></div>了，相当于在父组件引用子组件就成功了。

导航区块

导航区块内容

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

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

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

<style>
  #app //id用#，class用.
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center
</style>

导航区块路由实现

在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 属性指定链接，最后通过<router-view></router-view>将路由匹配到的组件渲染在内容区。内容修改为

<div class="tab border-1px">
   <div class="tab-item">
       <!-- 使用 router-link 组件来导航. -->
       <!-- 通过传入 `to` 属性指定链接. -->
       <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <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>