vue小项目实战

项目概念图

```

  devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

        compilationSuccessInfo: {

          messages: [`Your application is running here: http://${config.dev.host}:${port}`],

        },

        onErrors: config.dev.notifyOnErrors

        ? utils.createNotifierCallback()

        : undefined

```

案例说明

        参考教程

        https://www.jianshu.com/p/ec436222c608

一、 项目说明

        ps：这个简单小项目只提供一个小小小的骨架，需要向“它”身上具体加多少“肉”，需要大家考虑好功能和布局后进行完善。

        1.首先看下主页效果：如下图

主页分析：大体上分为上（header）、中（body或content）、下（footer）三部分，中间body部分是由若干个相同的li组成的“列表”，所以我们可将li定义为一个组件。

2.再来看下商品详情页：如下图

详情页分析：也分为上、中、下三部分。

清单

、 配置目录文件

在src文件夹（也就是我们码农主要工作区）下，创建assets文件夹（用来保存项目所需图片）、components（存组件commonFooter.vue、DetailHeader.vue、homeHeader.vue、list.vue）、pages（存页面goodsDetail.vue、home.vue）和main.js文件。详情请看下图：

ps:  1.具体文件夹以及文件名称可根据自己项目进行“自拟”。 2.这里的每一个*.vue文件都是一个组件。

、配置相关接口

主页商品信息及图片， 是从服务器端返回的json数据，不可能所以商品都“写死”。故这里需要模拟后台建立了一个数据文件。在根目录下建立一个goods.json文件用来放“伪数据”，如下图：

注意json里不能带有注释和其他文字,不然会项目跑不起来,出错

{

"goods": [

{ "price": "69.9", "title": "德芙", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t3688/270/776223567/128582/fa074fb3/58170f6dN6b9a12bf.jpg!q50.jpg.webp" },

{ "price": &