vue实战之 仿饿了吗 之 页面主要js和vue文件

1. 总入口文件 main.js

（1）主要导入相关组件及安装相关插件，具体代码如下:import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import goods from 'components/goods/goods'
import ratings from 'components/ratings/ratings'
import seller from 'components/seller/seller'
import vueTap from 'v-tap'
import fastclick from 'fastclick'
import Vuex from 'vuex'
//导入相关组件
Vue.use(vueTap)
Vue.use(VueRouter)
Vue.use(Vuex)
//安装 Vue 插件
（2).定义存储数据和管理数据方法的仓库,具体代码如下
const store = new Vuex.Store({
state: {
count: 0
},
// 添加的商品元素
addCartEl: {},
//mutations 对应 methods
mutations: {
increment(state) {
state.count++
}
}
})
（3）定义相关路由，vue路由主要作用就是页面的跳转链接，下面定义了3个跳转链接，对应着三个tab页面，path：跳转路径，component：组件，定义了跳转页面的内容，linkActiveClass：跳转的样式，具体代码如下:
const router = new VueRouter({
routes: [{
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}],
//选中tab页的样式
linkActiveClass: 'active'
})
（4）创建 vue 对象，并将挂载到 #app 上，vue 中定义了路由 ，仓库和模板，主要代码如下：

new Vue({
  router,
  store,
  template: '<App/>',
  components: {
    App
  },
  data: {
    eventHub: new Vue()
  }
}).$mount('#app')

最后定义默认的页面，默认页面显示goods页面

//默认页面时跳转 goods这个页面
router.push('goods')

2.总入口VUE :app.vue

（1）大概页面总模板 template
页面头部引入 header 组件，并把从后台获取的 数据传给 header 组件中，这里用 v-bind:seller = “seller”绑定，而 v-bind 可以简写成 :seller = “seller”,顺便提一下，v-on:click 简写成@click,具体代码如下:

  //使用 header 组件，并将seller 数据传给 header 组件
  //header 定义了header 模板
  <v-header :seller="seller"></v-header>

页面内容主要是几个tab页的切换，包括商品展示，评论及商家信息，注意的是，此跳转链接的地址要与路由定义的path一致，而这链接也不再使用a标签，而是用 router-link,具体代码如下:

<div class="tab">
    <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>
  // keep-alive 把切换的组件保存在内存中，避免重新渲染，把sell 数据传给所有跳转的页面中
  // router-view 路由最顶层的出口，渲染路由匹配到的组件
  <keep-alive>
    <router-view :seller="seller"></router-view>
  </keep-alive>

（2）页面初始js
此js虽内容不多，但是是极其重要的，对之后在页面上数据的显示很关键。主要是接收后端的数据以及注册相关组件，export 申明整个项目存在的事件,贯穿整个项目,具体代码如下:

//导入组件
import header from 'components/header/header'
import axios from 'axios'

const ERR_OK = 0
//export 申明整个项目存在的事件
export default {
  data() {
    return {
      seller: {}
    }
  },
  //引入 data数据
  created() {
    axios.get('static/data.json').then((res) => {
      this.seller = res.data.seller
    })
  },
  //注册 header 组件
  components: {
    'v-header': header
  }
}

（3）页面总体布局css
注意的是，vue文件中css 与html中略有不同，元素的样式不需要花括号包起来，且二级元素不需要再次写一级元素，用空格键区分，具体代码如下:

<style lang="stylus" rel="stylesheet/stylus">
  @import 'common/stylus/index'
  .tab
    display:flex
    width:100%
    height:40px
    line-height:40px
    border-1px(rgba(7,17,27,0.1))
    .tab-item
      flex:1
      text-align:center
      a
        display:block
        font-size:14px
        color rgb(77,85,93)
        &.active
          font-size 14px
          color rgb(240,20,20)
</style>

以上就是总体的js 和 vue ，具体内容页后面再具体分析