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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/this_tall_people/article/details/73832099

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 ,具体内容页后面再具体分析

展开阅读全文

没有更多推荐了,返回首页