Vue2.0史上最全入坑教程（下）—— 实战案例

2021-08-07 00:24:30

书接上文

前言：经过前两节的学习，我们已经可以创建一个vue工程了。下面我们将一起来学习制作一个简单的实战案例。

说明：默认我们已经用vue-cli（vue脚手架或称前端自动化构建工具）创建好项目了

一、项目说明

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

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

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

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

分析后是不是觉得so easy呢！很好那么我们就一起来搞一下！！

二、配置目录文件

在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文件用来放“伪数据”，如下图：

注意：下面的注释不要复制进去。否则可能会报错。

/* 模拟数据_代码 */

/* 这里只简单模拟一组比较规整数据，如大家有需求可自行加所需数据 */

{

    "goods": [

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

        { "price": "63", "title": "费列罗", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t613/100/1264998035/221234/1a29d51f/54c34525Nb4f6581c.jpg!q50.jpg.webp"},

        { "price": "29.9", "title": "大米", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t1258/40/17387560/108696/aced445f/54e011deN3ae867ae.jpg!q50.jpg.webp"},

        { "price": "54.9", "title": "安慕希", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2734/15/680373407/215934/3abaa748/572057daNc09b5da7.jpg!q50.jpg.webp"},

        { "price": "58", "title": "金典", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2482/145/1424008556/91991/d62f5454/569f47a2N3f763060.jpg!q50.jpg.webp"},

        { "price": "60", "title": "味可滋", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2368/3/874563950/70786/7b5e8edd/563074c8N4d535db4.jpg!q50.jpg.webp" },

        { "price": "248.00", "title": "泸州老窖", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t283/166/1424018055/189580/7c0792b7/543b4958N05fa2feb.jpg!q50.jpg.webp"},

        { "price": "328.8", "title": "剑南春", "img": "http://m.360buyimg.com/babel/s350x350_g15/M05/1A/0A/rBEhWlNeLAwIAAAAAAHyok3PZY0AAMl8gO8My0AAfK6307.jpg!q50.jpg.webp"},

        { "price": "49.00", "title": "蓝莓", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2332/148/2952098628/94387/e64654e2/56f8d76aNb088c2ab.jpg!q50.jpg.webp" },

        { "price": "68", "title": "芒果", "img": "http://m.360buyimg.com/n0/jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q70.jpg"}

    ]

}

数据文件创建完成后，就需要写一个接口了，在build文件夹下dev-server.js文件进行配置。如图：

注意
本文是在vue-cli为2.8.1的时候编写。最近很多小伙伴vue -V版本为2.9.1找不到derver.js文件。。现已提供两种解决方案以便参考

简单说明：

需要在var app = express() 代码下写新增代码,，因通过接口获取数据依赖与express() 对象下方法；

用require引入模拟数据的文件；
用express对象下的Router方法来指定入口在哪。
对进入“入口”的obj，返回相关数据。

/* datura接口 20170302 */

var appData = require('../goods.json')  /* 引入根目录下goods.json数据文件 */

var goods = appData.goods   /* goods.json文件文件下的.goods数据赋值给变量goods */

var apiRoutes = express.Router()  /* 定义express.Router() 对象 */

apiRoutes.get('/goods', function(req, res){   /* 定义接口并返回数据 */

  res.json({

    data: goods

  })

})

app.use('/api', apiRoutes)  /* 定义接口在/api目录下，方便管理 */

/* datura接口 _end */

测试是否该数据可用，在浏览器地址栏中输入：http://localhost:8090/api/goods ，此处因为本人PC的8080端口有冲突所以改成端口8090。在浏览器中展示出如下图数据，代码数据数取成功：

四、编写页面代码

1. 页面入口index.html：

知识点：

定义挂载Vue实例的对象“#app”；
必须定义数据战术区域，这里用<router-view></router-view>标签展示组件或模版；
根据不同设备分辨率改变根字体大小从而达到终端适配。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>secondproject</title>

    <style media="screen">

    /* 简单进行默认样式重置 */

      * {margin: 0;padding: 0}

      li {list-style: none;}

      a {text-decoration: none;}

      img {vertical-align: middle;}

    </style>

  </head>

  <body>

    <div id="app">

      <router-view></router-view>  <!-- 这里是展示来自路由页面数据的 -->

    </div>

  </body>

  <script type="text/javascript">

  /* 因为我们后面用的是rem布局，所以这里做下处理，根据不用设备分辨率更改跟字体大小。 rem相关布局[请参考](http://www.jianshu.com/p/65f80d4b44bb)*/

    (function(win,doc){

          change();

          function change(){

              doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/320+'px';

          }

          win.addEventListener('resize',change,false);

          win.addEventListener('orientationchange',change,false);  /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */

      })(window,document);

  </script>

</html>

2. 主要模版home.vue：这个是来展示数据的，并通过vue的路由展示到index.html。

因为home.vue用到了三个组件，所以我们就先编写下这几个组件
a). homeHeader.vue：和之前说的一样，在template标签里写html代码，style标签里写css代码，script标签里写js代码

知识点：<style></style>属性可进行配置，scoped表此样式只在当前页面有效。lang="xxx"支持less/sass语法规则。

<template lang="html">

  <div class="head">

    <div class="header">

      <h4 class="header-cont">主页</h4>

    </div>

  </div>

</template>

<script>

export default {

}

</script>

<style lang="css" scoped>

.head{

  width: 100%;

  height: 2rem;

}

.header{

  width: 100%;

  height: 2rem;

  position: fixed;

  left: 0;

  top: 0;

  background-color: #fff;

  border-bottom: 2px solid #ff8000;

}

.header h4 {

  width: 100%;

  text-align: center;

  line-height: 2rem;

  font-size: 1.4rem;

}

</style>

b). commonFooter.vue：
说明：定义一个footer并定位到页面的底部，在ul内写4个li来模拟按钮。

<template lang="html">

  <div class="footer">

    <ul class="footer-cont">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

  </div>

</template>

<script>

export default {

}

</script>

<style lang="css">

  .footer {

    height: 1.8rem;

    width: 100%;

    position: fixed;

    bottom: 0;

    left: 0;

    border-top: 2px solid #ccc;

    background-color: #fff;

  }

  .footer-cont li {

    float: left;

    width: 25%;

    height: 1.8rem;

    line-height: 1.8rem;

    font-size: 1.4rem;

    color: #ff8000;

    text-align: center;

  }

  .footer-cont li:active {

    background-color: #ccc;

  }

  .footer-cont:after {

    content: '';

    display: block;

    clear: both;

    width: 0;

    height: 0;

  }

</style>

c). list.vue：这个组件用来展示每个商品列表信息