简介：
 
本篇主要介绍如何通过webpack构建一个简单的vue项目，不涉及vue的安装，如果没有安装vue的话，请先安装vue.
 
在使用vue的时候，通常有两种方式，一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是通过webpack构建vue工程（不知这样描述是不是准确），本篇将对该方法展开叙述（前提安装了vue）：
 
步骤
 
1、建立项目路径。首先建立一个项目路径（我的位于D:\Program Files\vueProject），尽量不要放在c盘，打开命令行窗口，将路径切换到工作路径中。
 
 
2、输入vue init webpack demo，建立项目。其中demo使我们要建立的项目名称，当脚本执行时，会继续进行确认。如下图，其中的一些乱码我也不知道是什么原因。
 
 
接下来就是确认项目描述信息，作者信息，这个根据个人喜好，填写吧。Vue build选择默认的，vue-router选择yes（如果不选择，则无法使用vue的路由功能，有关路由功能的参考vue路由详解，个人觉得这块还是比较重要的）
 
 
下面的内容应该是有关js语法检测的内容，直接输入n就可以，暂时用不到。然后按enter，直到开始安装。
 
 
出现以下内容，表示已经正确安装。
 
 
根据提示信息，切换到demo目录下，然后执行npm run dev。编译并启动我们的项目
 
 
 
在浏览器中输入访问的网址，访问界面表示已经正确配置
 
至此，项目已经成功构建，在下一篇内容中，我们将对生成的文件进行简单的说明。

 
 
关注公众号 前端开发博客，回复“加群”
 
加入我们一起学习，天天进步
 

 
作者：沐码

 
链接：https://wintc.top/article/29
 
使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览：
 
 
 
一、准备工作——服务器和nginx使用 
 
1. 准备一台服务器
 
我的是ubuntu系统，linux系统的操作都差不多。没有服务器怎么破？
 
如果你只是想体验一下，可以尝试各大厂的云服务器免费试用套餐，比如华为云免费试用，本文相关操作即是在华为云上完成的。不过如果想时常练练手，我觉得可以购买一台云服务器，比如上面的华为云或者阿里云都还挺可靠。我的个人网站就是部署在阿里云，你可以点击我的推广链接进行购买，近期有活动首次购买不到100块/年。
 
2. nginx安装和启动
 
轻装简行，这部分不作过多赘述（毕竟网上相关教程一大堆），正常情况下仅需下面两个指令：
 
# 安装，安装完成后使用nginx -v检查，如果输出nginx的版本信息表明安装成功
sudo apt-get install nginx
# 启动
sudo service nginx start

 
启动后，正常情况下，直接访问 http://服务器ip 或 http://域名 （本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，在服务器安全组配置一下即可。
 
 
 
3. 了解nginx: 修改nginx配置，让nginx服务器代理我们创建的文件
 
查看nginx的配置，linux系统下的配置文件通常会存放在/etc目录下，nginx的配置文件就在/etc/nginx文件夹，打开文件/etc/nginx/sites-available/default（nginx可以有多个配置文件，通常我们配置nginx也是修改这个文件）：
 
 
 
可以看到默认情况下，nginx代理的根目录是/var/www/html，输入 http://服务器ip会访问这个文件夹下的文件，会根据index的配置值来找默认访问的文件，比如index.html、index.htm之类。
 
我们可以更改root的值来修改nginx服务代理的文件夹：
 
创建文件夹/www，并创建index.html，写入"Hello world"字符串
mkdir /www
echo 'Hello world' > /www/index.html
修改root值为 /www
sudo nginx -t 检查nginx配置是否正确
加载nginx配置：sudo nginx -s reload
 
再次访问页面，发现页面内容已经变成了我们创建的index.html:
 
 
 
二、Vue项目打包同步文件到远程服务器 
 
1. 打包
 
默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm run build即可。
 
2. 同步到远程服务器
 
我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/www。同步文件可以在git-bash或者powershell使用scp指令，如果是linux环境开发，还可以使用rsync指令:
 
scp -r dist/* root@117.78.4.26:/www
或
rsync -avr --delete-after dist/* root@117.78.4.26:/www 

 
注意这里以及后续步骤是root使用用户远程同步，应该根据你的具体情况替换root和ip(ip换为你自己的服务器IP)。
 
为了方便，可以在package.json脚本中加一个push命令，以使用yarn为例（如果你使用npm，则push命令中yarn改成npm  run即可）：
 
 "scripts": {
    "build": "vue-cli-service build",
    "push": "yarn build && scp -r dist/* root@117.78.4.26:/www"
  },

 
这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题，就是命令执行的时候要求输入远程服务器的root密码（这里使用root来连接远程的，你可以用别的用户，毕竟root用户权限太高了）。
 
为了避免每次执行都要输入root密码，我们可以将本机的ssh同步到远程服务器的authorized_keys文件中。
 
3. 同步ssh key
 
生成ssh key：使用git bash或者powershell执行ssh-keygen可以生成ssh key。会询问生成的key存放地址，直接回车就行，如果已经存在，则会询问是否覆盖：
同步ssh key到远程服务器，使用ssh-copy-id指令同步
ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26

 
输入密码后，之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器（此处是root用户家目录）~/.ssh/authorized_keys文件里：
 
当然你也可以手动复制本地~/.ssh/id_rsa.pub（注意是pub结尾的公钥）文件内容追加到服务器~/.ssh/authorized_keys的后面（从命名可以看出该文件可以存储多个ssh key）
 
注意：这里全程使用的是root用户，所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户，或许会存在同步文件失败的问题，此时需要远程服务器修改文件夹的读写权限（命令 chmod）。
 
创建了一个测试项目（点击本链接可以在gihub查看）[1]试一下，打包、文件上传一句指令搞定啦：
 
 
 
访问一下，果然看到了我们熟悉的界面：
 
 
 
至此，常规情况下发布Vue项目就介绍完了，接下来介绍非域名根路径下发布以及history路由模式发布方法。
 
三、非域名根路径发布 
 
有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目，比如我们希望项目部署到http://a.com/test下，这样访问http://a.com/test访问到的是项目的首页，而非test前缀的地址会访问到其它项目。此时需要修改nginx配置以及Vue打包配置。
 
1. nginx配置
 
只需要添加一条location规则，分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/www文件夹，这里因为文件夹名称和访问路径不一致，需要用到alias这个配置：
 
 
 
如果文件夹名称与访问路径一致都为test，那这里可以用root来配置：
 
 
 
这里要将/test配置放到/之前，意味着在路由进入的时候，会优先匹配/test。如果根路径/下的项目有子路由/test，那http://xxxx/test只会访问到/www里的项目，而不会访问该子路由。
 
2. 项目配置
 
为了解决打包后资源路径不对的问题，需要在vue.config.js中配置publicPath，这里有两种配置方式，分别将publicPath配置为./和/test：
 
 
 
更新nginx配置，发布后即可正常访问啦。这里的两种配置方式是有区别的，接下来会看一下它们的区别。如果不进行项目配置，直接发布访问会出现JS、CSS等资源找不到导致页面空白的问题：
 
 
 
该问题原因是资源引用路径不对，页面审查元素可以看到，页面引用的js都是从根路径下引用的：
 
 
 
查看打包后的文件结构，可以看到js/css/img/static等资源文件是与index.html处于同级别的：
 
 
 
对于两种配置方式，看看都是怎么生效的：
 
publicPath配置为./， 打包后资源引用路径为相对路径：
publicPath配置为/test，打包后资源相对路径为从域名根目录开始的绝对路径：
 
两种配置都可以正确地找到JS、CSS等资源。不过还有个问题，那就是static中的静态资源依旧会找不到。
 
3. 绝对路径引用的静态资源找不到的问题
 
因为在打包过程中，public下的静态资源都不会被webpack处理，我们需要通过绝对路径来引用它们。当项目部署到非域名根路径上时，这点非常头疼，你需要在每个引用的URL前面加上process.env.BASE_URL（该值即对应上文配置的publicPath），以使得资源能被正常访问到。我们可以在main.js把这个变量值绑定到Vue.prototype，这样每个Vue组件都可以使用它：
 
Vue.prototype.$pb = process.env.BASE_URL

 
在模板中使用：
 
<img :src="`${$pb}static/logo.png`">

 
然而，更加头疼并且没有良好解决方案的问题是在组件style部分使用public文件夹下的静态资源：
 
如果需要使用图片等作为背景图片等，尽量使用内联方式使用吧，像在模板中使用一样。
如果需要引入样式文件，则在index.html中使用插值方式引入吧。
 
关于静态资源的问题，vue-cli的推荐是尽量**将资源作为你的模块依赖图的一部分导入（即放到assets中，使用相对路径引用），**避免该问题的同时也带来其它好处：
 
 
四、history模式部署 
 
默认情况下，Vue项目使用的是hash路由模式，就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。正常情况下，当浏览器地址栏地址改变，浏览器会重新加载页面，而如果是hash部分修改的话，则不会，这就是前端路由的原理，允许根据不同的路由页面局部更新而不刷新整个页面。H5新增了history的pushState接口，也允许前端操作改变路由地址但是不触发页面刷新，history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。
 
1. 项目配置
 
在vue-router路由选项中配置mode选项和base选项，mode配置为'history'；如果部署到非域名根目录，还需要配置base选项为前文配置的publicPath值（注意：此情况下，publicPath必须使用绝对路径/test的配置形式，而不能用相对路径./）
 
 
 
2. nginx配置
 
对于history模式，假设项目部署到域名下的/test目录，访问http://xxx/test/about的时候，服务器会去找/test指向的目录下的about子目录或文件，很显然因为是单页面应用，并不会存在a这个目录或者文件，就会导致404错误：
 
 
 
我们要配置nginx让这种情况下，服务器能够返回单页应用的index.html，然后剩下的路由解析的事情就交给前端来完成即可。
 
 
 
这句配置的意思就是，拿到一个地址，先根据地址尝试找对应文件，找不到再试探地址对应的文件夹，再找不到就返回/test/index.html。再次打开刚才的about地址，刷新页面也不会404啦：
 
 
 
3. history模式部署到非域名根路径下
 
非域名根目录下部署，首先肯定要配置publicPath。需要注意的点前面其实已经提过了，就是这种情况下不能使用相对路径./或者空串配置publicPath。为什么呢？原因是它会导致router-link等的表现错乱，使用测试项目[2]分别使用两种配置打包发布，审查元素就能看出区别。在页面上有两个router-link，Home和About：
 
 
 
两种配置打包后的结果如下。
 
publicPath配置为./或者空串：
publicPath配置为/test：
 
publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址，很明显是错误的，所以非域名根路径部署应该将publicPath配置为完整的前缀路径。
 
五、结语 
 
关于Vue项目发布的相关问题就先总结这么多，几乎在每一步都踩过坑才有所体会，有问题欢迎各位同学一起探讨。写博客很累，不过收获也很多，还是要坚持；有时候别人转载自己的原创文章也不标明出处，竟然将写文章日期改得比原创还早，有点心累。本文中使用到的图片都加了个自己的水印，是前端实现的，原理也很简单，之后写一篇简短的文章分享一下。
 
参考资料
 
[1]
 
Vue项目打包发布: https://github.com/Lushenggang/vue-publish-test
 [2]
 
Vue项目打包部署测试项目地址: https://github.com/Lushenggang/vue-publish-test
 
相关文章
 
基于Vue的前端架构，我做了这15点
Vue3的学习记录
一份很棒的Vue3 学习清单

 
最后
 
转发文章并关注公众号：前端开发博客，回复 1024，领取前端进阶资料
 
回复「电子书」领取27本精选电子书
回复「加群」加入前端大神交流群，一起学习进步
回复「Vue」获取 Vue 精选文章

 
点赞和在看就是最大的支持❤️
 

 
 
这里是仿猫眼移动端。使用 vue-cli 创建项目。
 ​
 本节先介绍并进行项目的初始化，然后把主框架搭起来，熟悉路由和组件，后面在 项目demo 持续贴出完整项目代码。也会更新博客。
 ​
 第二节传送
 
 
 
 
2020-02-20 ：目前已更新 猫眼升级版 技术栈：vue-cli3 + typescript + axios
 
 
vue初始化项目
 
首先全局安装Vue脚手架——vue-cli
 
npm/cnpm install vue-cli -g
 
新建一个文件夹vue-demo，在该文件夹下打开命令窗口，并输入以下命令：
 
vue init webpack vuedemo-maoyan	//使用脚手架初始化项目，vueDemo是项目名
 
然后回车并进行设置
 
 
这个时候会在文件夹下产生一个名为 vuedemo-maoyan 的项目文件夹
 
 在该项目文件夹下，打开命令窗口，安装所有依赖包。然后启动开发环境
 
# 安装依赖
npm install

# 启动开发环境
npm run dev
 

 编译完成，访问 http://localhost:8080 ，出现以下界面，则demo初始化成功。
 
 
vue项目下各文件夹和各文件的功能描述
 
 
一些代码描述
 
webpack.base.conf.js
 
路径： bulid
 
// webpack.base.conf.js
module.exports = {
    ...
    resolve: {
        //设置扩展名，如果配置了这个，name在import导入的时候，就不用再写后缀名了
        //使用scss的时候，还可以加上 .css 和 .scss
        extensions: ['.js', '.vue', '.json'，'.css','.scss'],

        //别名配置
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    }
    ...
}
 
 
 
 
这里的@指的是路径../src，在webpack.base.conf.js里被封装了。
 
 
main.js
 
路径：src
 
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
/**
 * 其实就是：import router from './router/index.js'
 * 在使用webpack项目中，如果导入index.js，则可以省略
 * 这里是相当于导入了一个路由
 */

// 在生产环境下把注释全部去掉
Vue.config.productionTip = false

// 是否启动代码质量检查，不要删除
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
 
看下图及注释
 
 
项目开发
 
准备工作
 
 
修改 index.html 文件
 
路径： 位于根目录。
 
  
 
   
index.html文件需要更改和添加的只有title和meta
 
  
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!-- 添加的内容 -->
        <meta name="renderer" content="webkit">
        <title>vue工程化-猫眼</title>
    </head>
    <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>
 
  
 
   
对新添加的meta标签不理解的，看这里
 
  
 
 
修改 App.vue 文件
 
路径：src
 
  
 
   
删除<img src="./assets/logo.png"> 和<style>标签内的样式
 
  
 
 
新建pages文件夹
 
在src目录下新建，这个目录模拟单页面开发当中的路由
 
 
开发演示
 
 
在pages文件夹下新建文件 index.vue 并进行简单的编辑
 
<template>
  <div>
    <h2>{{pageTitle}}</h2>
    <div>This is a simple page</div>
  </div>
</template>
   
<script>
export default {
  name: "index",
  data() {
    return {
      pageTitle:'测试主页'
    };
  }
};
</script>

<style scoped>

</style>
 
 
路由的引入、定义
 
路径： router
 
// index.js
import Vue from 'vue'
import Router from 'vue-router'
// 引入路由
import index from '@/pages/index'

Vue.use(Router)

export default new Router({
   // routes用来定义路由对象，里面的每一个对象都是一个路由
 routes: [
   {
     path: '/', // 碰到这个路径跳转路由至index
     name: 'index',  // 给这个路由取的一个别名
     component: index // 代表在当前路径下，加载index路由
   }
 ]
})
 
 
在需要加载路由的地方，使用Vue组件 router-view 去加载
 
路径： src
 
<!-- App.vue -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>
 
此时页面就已经自动刷新成以下界面：
 
 
 
组件化开发
 
  
 
在components下新建文件hoting.vue 和comming.vue
 
// hoting.vue
<template>
   <div class="hoting"></div>
</template>
   
<script>
// 导出组件
export default {
   name:'hoting'
}
</script>

<style scoped>
</style>
 
// comming.vue
<template>
   <div class="comming"></div>
</template>
   
<script>
// 导出组件
export default {
   name:'comming'
}
</script>

<style scoped>
</style>
 
 
在需要使用组件的地方引入并注册组件
 
// index.vue 路径：src/pages
<template>
  <div>
    <div class="pageTitle">猫眼电影</div>
    <ul class="topNav">
      <li :class="[showHot==1?'active':'']" @click="showHot=1">正在热映</li>
      <li :class="[showHot==0?'active':'']" @click="showHot=0">即将上映</li>
    </ul>
    <div class="main">
      <hoting v-show="showHot==1"></hoting>
      <comming v-show="showHot==0"></comming>
    </div>
    
  </div>
</template>
   
<script>
import hoting from '@/components/hoting'
import comming from '@/components/comming'

export default {
  name: "index",
  components: {
    hoting,comming
  },
  data() {
    return {
      showHot:1
    }
  }
};
</script>

<style scoped>
/** 其他样式代码已注释，demo有完整代码 **/
.active{
  color: rgb(229, 72, 71);
  border-bottom: 2px solid rgb(229, 72, 71);
}
</style>
 
现在点击相应的按钮就会跳到相应的界面
 
 
 
路由跳转（通过路由添加电影详情页）
 
  
 
在路由文件夹pages下新建文件 movieDetail.vue 作为要跳转的详情页
 
<template>
	<div>
		<h3>欢迎来到电影详情页</h3>
	</div>
</template>
// ...
 
 
将详情页路由加入到路由对象中
 
// index.js  路由：src/router
import Vue from 'vue'
import Router from 'vue-router'
// 引入
import index from '@/pages/index'
import movieDetail from '@/pages/movieDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',  
      component: index
    },
    {
    	path:'/movieDetail',
    	name: 'movieDetail',
    	component: movieDetail
    }
  ]
})
 
 
在热映和即将上映的页面，添加进入详情页的按钮
 
<template>
  <div class="hoting">
    <h3>正在热映的电影</h3>
    <button @click='$router.push({name:"movieDetail"})'>点击进入电影详情页</button>
  </div>
</template>
// ...
 
    
 
     
$router.push() 属于编程式路由
 
    
 
现在点击按钮 点击进入电影详情页 即可通过路由进入详情页页面（地址栏已经跳到了详情页路由） 
 
 
 
点这里查看完整demo地址
 
点我进入第二节

 
 路由：index.js
 
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

 
视图页面：views
 
<template>
    <div class="main">
        <div class="left">
            <Left></Left>
        </div>
        <div class="right">
            <div class="top">
                <img src="img/title.jpg" alt="">
            </div>
            <div class ="buttom">
                <Right></Right>
            </div>
        </div>
    </div>
</template>

<script>
    import Left from "../components/Left";
    import Right from "../components/Right";
    export default {
       components:{
           Left,
           Right
       }
    }
</script>

<style scoped>
    *{
        padding: 0;
        margin:0;
    }
    .left{
        width:100px;
        float: left;
        margin-right: 10px;
    }
    .right{
        width: 1000px;
        float: left;
        margin-left: 10px;
    }
    .main{
        width: 1200px;
        margin: 20px auto;
    }
    .top img{
        height: 200px;
        width: 1000px;
        object-fit: cover;
    }
    .left,.right{
        background-color: #f5f5f5;
        height: 500px;
    }
</style>
 
组件零部件components
 msg.js
 
import Vue from 'vue';
export default new Vue;
/*事件总线*/
 
Left.vue
 
<template>
    <div>
        <div class="title">热门推荐</div>
        <ul class="menu">
            <li @click="menu1">笔记本电脑</li>
            <li @click="menu2">手机</li>
            <li @click="menu3">手机</li>
            <li @click="menu4">手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
        </ul>
    </div>
</template>

<script>
	//引入事件总线
    import Msg from './msg.js'
    export default {
        name: "left",
        //事件
        methods:{
            menu1:function () {
            	//事件总线传值，$emit('参数名'，'参数值')触发$on
                Msg.$emit("val","1");
            },
            menu2:function () {
                Msg.$emit("val","2");
            },
            menu3:function () {
                Msg.$emit("val","3");
            },
            menu4:function () {
                Msg.$emit("val","4");
            }
        }
    }
</script>

<style scoped>
    .title{
        width: 100px;
        color: red;
    }
    .menu li{
        list-style: none;
        height: 40px;
        margin-left: -40px;
        margin-bottom: 2px;
        background-color: white;
        line-height: 40px;
        cursor: pointer;
    }
</style>
 
Right.vue（父组件）
 
<template>
    <div>
        <div v-if="sss==1">
            <GoodsList :goodId="1"></GoodsList>
        </div>
        <div v-else-if="sss==2">
            <GoodsList :goodId="2"></GoodsList>
        </div>
        <div v-else-if="sss==3">
            3333
        </div>
        <div v-else-if="sss==4">
            4444
        </div>
        <div v-else>
            <GoodsList :goodId="0"></GoodsList>
        </div>
    </div>
</template>

<script>
   //引入事件总线
    import Msg from './msg.js'
    //引入子组件
    import GoodsList from './goodsList'
    export default {
        name: "Right",
        //初始默认值
        data(){
            return{
                sss:0
            }
        },
        //钩子函数
        mounted:function () {
            //this关键指的是当前文件vue本身
            var that = this;
            //事件总线接收参数
            Msg.$on('val',function(m){
                //this代表on事件,that代表vue文件本身，m是传的参数
                that.sss = m;
            })
        },
        //注册的组件
        components:{
            GoodsList
        }
    }
</script>
 
要使用json安装一个传插件axios,然后进行注册
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.prototype.$http=axios
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 
bjb.json同理shouji.json
 
[
  {
    "goodsname": "联想",
    "img": "img/bjb/1.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/2.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/3.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/4.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/5.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/6.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/7.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/8.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/9.jpg"
  },
  {
    "goodsname": "联想",
    "img": "img/bjb/10.jpg"
  }
]
 
goodsList.vue（子组件）
 
<template>
    <div name="show">
        <ul class="goodlist">
            <li v-for="goods in List">
		        //绑定图片及时响应
                <img v-bind:src="goods.img">
                //插值
                <p>{{goods.goodsname}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "show",
        //初始化值
        data(){
            var that = this;
            var url = '';
            if(this.goodId==1){
                url ="json/bjb.json";
            }else if(this.goodId==2){
                url = "json/shouji.json"
            }else{
                url="json/bjb.json"
            }
            //发送请求获取数据axios里边的$http
            this.$http.get(url).then(res=>{
                that.List=res.data;
            })
            return{
                List:[]
            }
        },
        //子组件向父组件传值
        props:{
            goodId:Number
        },
        //监听goodsId是否改变
        watch:{
            goodId(){
                var that = this;
                var url = '';
                if(that.goodId==1){
                    url ="json/bjb.json";
                }else if(that.goodId==2){
                    url = "json/shouji.json"
                }
                this.$http.get(url).then(res=>{
                    //res里边的关键字data
                    that.List=res.data;
                })
                //返回数据
                return{
                    List:[]
                }
            }
        }
    }
</script>

<style scoped>
    .goodlist{
        margin:10px;
    }
    .goodlist li{
        width: 180px;
        height: 180px;
        list-style:none;
        float: left;
        font-size: 9px;
        color: red;
        margin-bottom: 30px;
    }
    .goodlist img{
        width: 170px;
        height: 170px;
    }
</style>