安装node.js，安装成功了就会有npm包资源管理器

[
  {
    "goodName": "xiaoxin1",
    "img":"img/jsj/jsj1.png"
  },
  {
    "goodName": "xiaoxin2",
    "img":"img/jsj/jsj2.png"
  },
  {
    "goodName": "xiaoxin3",
    "img":"img/jsj/jsj3.png"
  },
  {
    "goodName": "xiaoxin4",
    "img":"img/jsj/jsj4.png"
  },
  {
    "goodName": "xiaoxin5",
    "img":"img/jsj/jsj5.png"
  },
  {
    "goodName": "xiaoxin6",
    "img":"img/jsj/jsj6.png"
  },
  {
    "goodName": "xiaoxin7",
    "img":"img/jsj/jsj7.png"
  },
  {
    "goodName": "xiaoxin8",
    "img":"img/jsj/jsj8.png"
  }
]

[
  {
    "goodName": "sxiaoxin1",
    "img":"img/sj/sj1.png"
  },
  {
    "goodName": "sxiaoxin2",
    "img":"img/sj/sj2.png"
  },
  {
    "goodName": "sxiaoxin3",
    "img":"img/sj/sj3.png"
  },
  {
    "goodName": "sxiaoxin4",
    "img":"img/sj/sj4.png"
  },
  {
    "goodName": "sxiaoxin5",
    "img":"img/sj/sj5.png"
  },
  {
    "goodName": "sxiaoxin6",
    "img":"img/sj/sj6.png"
  },
  {
    "goodName": "sxiaoxin7",
    "img":"img/sj/sj7.png"
  },
  {
    "goodName": "sxiaoxin8",
    "img":"img/sj/sj8.png"
  }
]

<template>
    <div name="show">
        ============
        <ul class="goodList">
            <li v-for="good in list">
                <img v-bind:src="good.img">
                <p>{{good.goodName}}</p>
            </li>
        </ul>
    </div>
</template>
<style type="text/css">
    .goodList li{
       width: 200px;
        height: 200px;
        list-style: none;
        float: left;
        font-size: 9px;
        color: red;
        margin-bottom: 30px;
    }
    .goodList img{
        width: 180px;
        height: 180px;
    }
</style>
<script type="text/javascript">
    export default {
        name:"show",
        data(){
            var _this = this;
            var url = "";
            console.log(_this.goodId);
            if(_this.goodId==1){
                url="jsj.json";
            }else if(_this.goodId==2){
                url="sj.json";
            }else{
                url="jsj.json";
            }
            this.$http.get(url).then(function (res) {
                _this.list = res.data
                console.log(_this.list);
            })
            return{
                list:[]
            }
        },
        props:{//父子组件的传值
            goodId: Number
        },
        watch:{//监听父子组件传值的过程
            goodId(){
                var obj = this;
                var  url = "";
                if(obj.goodId==1){
                    url="jsj.json";
                }else if(obj.goodId==2){
                    url="sj.json";
                }else{
                    url="jsj.json";
                }
                this.$http.get(url).then(function (res) {
                    obj.list = res.data
                    console.log(obj.list);
                })
                return{
                    list:[]
                }
            }
        }
    }
</script>

<template>
    <div>
        <div class="title">
            热门推荐
        </div>
        <div class="menu">
            <ul>
                <li @click="menu1">笔记本电脑 </li>
                <li @click="menu2">手机</li>
                <li @click="menu3">笔记本电脑 </li>
                <li>手机</li>
                <li>笔记本电脑 </li>
                <li>手机</li>
                <li>笔记本电脑 </li>
                <li>手机</li>
                <li>笔记本电脑 </li>
                <li>手机</li>
                <li>手机</li>
            </ul>
        </div>
    </div>
</template>
<style>
    .title{
        color: red;
        width: 100px;
    }
    .menu li{
        list-style: none;
        height: 50px;
        margin-bottom: 2px;
        line-height: 50px;
        background-color: #fcfcfc;
        cursor: pointer;
    }

</style>
<script type="text/javascript">
    import Msg from './msg.js'
    export default {
        methods:{
            menu1:function () {
                Msg.$emit("val","1")
            },
            menu2:function () {
                Msg.$emit("val","2")
            },
            menu3:function () {
                Msg.$emit("val","3")
            }
        }
    }
</script>

import Vue from 'vue'
export default new Vue

<template>
    <div>
        <div v-if="kk==1">
            <GoodList :goodId=1></GoodList>
        </div>
        <div v-else-if="kk==2">
            <GoodList :goodId="2"></GoodList>
        </div>
        <div v-else-if="kk==3">
           33333333333
        </div>
        <div v-else>
            <GoodList :goodId="0"></GoodList>
        </div>
    </div>
</template>
<script>
    import Msg from './msg.js'
    import GoodList from './goodsList.vue'
    export default {
        data(){
            return{
                kk:0
            }
        },
        mounted:function () {
            var _this = this
            Msg.$on('val',function (m) {
                _this.kk = m;
            })
        },
        components:{
            GoodList
        }
    }
</script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import First from '../views/First.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    component: First
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

<template>
    <div class="main">
        <div class="left">
            <Left></Left>
        </div>
        <div class="right" >
            <div class="top">
                <img src="img/title.png">
            </div>
            <div class="buttom">
                <Right></Right>
            </div>
        </div>
    </div>
</template>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .left{
        width: 100px;
        float: left;
        margin-right: 10px;
    }
    .right{
        width: 1000px;
        float: left;
        margin-left: 10px;
    }
    .main{
        width: 1200px;
        margin: 10px auto;
    }
    .top img{
        height: 200px;
        width:1000px;
    }
    .right,.left{
        background-color: #f5f5f5;
        height: 500px;
    }
</style>
<script type="text/javascript">
    import Left from "../components/Left.vue"
    import Right from "../components/Right.vue"
    export default {
        components:{
            Left,
            Right
        }
    }
</script>