vue2.0+webpack高仿饿了么商家页面

vue2.0+webpack高仿饿了么商家页面

一、项目说明

1. 项目技术

• vue cli
• vue
• ES6
• vue-resource
• vue-router
• better-scroll
• sass
• webpack
• git

2. 项目地址:Github

3. 项目演示

• sell

• 手机扫描二维码

  

二、项目初始化

1. 使用vue官网给出的命令行工具

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project(sell)
# 安装依赖，走你
$ cd my-project(sell)
$ npm install
$ npm run dev

2. 初始项目目录（小部分修改）

├── build              // 构建服务和webpack配置
├── config             // 项目不同环境的配置
├── index.html         // 项目入口文件
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── common        // 公共的css js 资源
│   ├── components    // 各种组件
│   ├── router        // 路由
│   ├── App.vue       // 主页面 
│   └── main.js       // Webpack 预编译入口

3. 完整项目目录

接下来开始项目的开发

1. webpack 预编译入口文件 main.js

import Vue from 'vue';
import App from './App';
import router from './router';
// index.js会自动寻找到，也可以写全（import router from './router/index.js'）
import VueResource from 'vue-resource';
import './common/styles/index.scss';

/* 设置为 false 以阻止 vue 在启动时生成生产提示 */
Vue.config.productionTip = false;

Vue.use(VueResource); // 全局注册

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

2. 主页面 App.vue

（1）先上代码

<template>
  <div id="app">
    <v-header v-bind:seller="seller"></v-header>
    <div class='tab border-b-1px'>
      <div class='item-tab'>
        <router-link to="/goods">商品</router-link>
      </div>
      <div class='item-tab'>
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class='item-tab'>
         <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!--主要用于保留组件状态或避免重新渲染-->
    <keep-alive>
        <router-view v-bind:seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import header from './components/header/header.vue';
import {urlParse} from './common/js/util.js';
// import data from './common/json/data.json';
const ERR_OK=0;
export default {
  name:'App',
  data () {
    return {
        seller:{
            id: (() => {
                let queryParam=urlParse();
                return queryParam.id;
            })()
        }
    };
  },
  created (){
        this.$http.get('/api/seller?id=' + this.seller.id).then(response => {
            if(response.data.errno===ERR_OK){

// 用于对象的合并 , Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
                this.seller=Object.assign({},this.seller,response.data.data);
            }else{
                console.log('no data');
            }
        });
    // this.seller=Object.assign({},this.seller,data.seller);
  },
  components:{
    'v-header':header
  }
};
</script>

<style lang="scss" scoped>
  @import "./common/styles/mixin.scss";
  #app{
     .tab{
        display:flex;
        width:100%;
        height:40px;
        line-height:40px;
        font-size:14px;
        color:rgb(240,20,20);
        @include border-b-1px(rgba(7,17,27,0.1));
        .item-tab{
            flex:1;
            text-align:center;
            .active{
                color:rgb(240,20,20);
            }
        }
    }
  }
</style>

(2）代码关键说明

主页面的结构

• v-header 组件
• 路由渲染组件

功能实现

1) 获取mock数据

• 在入口文件中main.js 中， 引入 vue-resource ,并全局注册

import VueResource from 'vue-resource';

Vue.use(VueResource); // 全局注册

• 在 App.vue 中 ，使用生命周期钩子 created ， 在实例创建完成后被立即调用,请求数据。且需要在data 选项中返回数据对象（其中的id 放在后面介绍)。

data () {
    return {
        seller:{
            id: (() => {
                let queryParam=urlParse();
                return queryParam.id;
            })()
        }
    };
  },
created (){
        this.$http.get('/api/seller?id=' + this.seller.id).then(response => {
            if(response.data.errno===ERR_OK){
                // 用于对象的合并 , Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
                this.seller=Object.assign({},this