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

阿新 • • 發佈：2017-12-22

多少跳轉 border src fff end har second vue

前言：經過前兩節的學習，我們已經可以創建一個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：這個組件用來展示每個商品列表信息

知識點：

類似a標簽功能的<router-link to="/detail"></router-link>標簽，來規定發生點擊事件後需要跳轉的地址。
:src="img" 中的img是來自父組件的數據，這裏用到了父組件向子組件傳遞數據。props對象在後續的深入學習中會詳細解釋。
{{ xxx }} 模版展示數據，也可用v-text=‘xxx‘，v-html=‘xxx‘來展示數據。後者是防止當網速超慢時，用戶會看到大花括號。
{{ xxx|aa|bb }}模版展示數據+過濾器，過濾器顧名思義就是對展示的數據加以過濾，例如這裏的是加個符號並保留兩位小數。
props

<template lang="html">
  <li class="goods-list">
    <router-link to="/detail"  class="goods-list-link">  <!--  這個是用來跳轉頁面的，可以理解為a標簽 -->
      <div class="goods-list-pic">
          <img :src="img" >
      </div>
      <div class="goods-list-desc">
        <p class="goods-list-name">{{ title }}</p>   
        <p class="goods-list-price">{{ price|dTofixed|dCurrency }}</p>  <!-- 這裏用到了過濾器貨幣形式和保留兩位小數 -->
      </div>
    </router-link>
  </li>
</template>

<script>
export default {
  props: [‘price‘, ‘title‘, ‘img‘]   /*  props是子組件獲取父組件數據用的 */
}
</script>

<style lang="css" scoped>
  .goods-list {
    width: 50%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
  }
  .goods-list:nth-of-type(odd) {
    border-right: 0.15rem solid #ccc;
  }
  .goods-list:nth-of-type(even) {
    border-left: 0.15rem solid #ccc;
  }
  .goods-list-link {
    display: block;
    padding: 0.5rem 0;
    margin: 0 0.3rem;
    text-align: center;
    background-color: #fff;
  }
  .goods-list:nth-of-type(even) .goods-list-link{
    margin-left: 0;
  }
  .goods-list:nth-of-type(odd) .goods-list-link{
    margin-right: 0;
  }
  .goods-list-pic {
    padding: 0.5rem;
  }
  .goods-list-pic > img {
    width: auto;
    height: 4rem;
  }
  .goods-list-desc {
    padding: 0 0.5rem;
  }
  .goods-list-desc:after {
    display: block;
    content: ‘‘;
    clear: both;
  }
  .goods-list-name,.goods-list-price {
    width: 50%;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.8rem;
    color: #333;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .goods-list-price {
    color: #ff8000;
    float: right;
  }
</style>

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

多少跳轉 border src fff end har second vue 前言：經過前兩節的學習，我們已經可以創建一個vue工程了。下面我們將一起來學習制作一個簡單的實戰案例。說明：默認我們已經用vue-cli（vue腳手架或稱前端自動化構建工具）創建好項目了一

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

前言：經過前兩節的學習，我們已經可以創建一個vue工程了。下面我們將一起來學習制作一個簡單的實戰案例。

一、項目說明

ps：這個簡單小項目只提供一個小小小的骨架，需要向“它”身上具體加多少“肉”，需要大家考慮好功能和布局後進行完善。

分析後是不是覺得so easy呢！很好那麽我們就一起來搞一下！！

二、配置目錄文件

ps: 1.具體文件夾以及文件名稱可根據自己項目進行“自擬”。 2.這裏的每一個*.vue文件都是一個組件。

三、配置相關接口

註意：下面的註釋不要復制進去。否則可能會報錯。

簡單說明：

四、編寫頁面代碼

1. 頁面入口index.html：

2. 主要模版home.vue：這個是來展示數據的，並通過vue的路由展示到index.html。

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

Vue2.0史上最全入坑教程—— 搭建Vue腳手架（vue-cli）

史上最簡單的iOS教程（二）

史上最簡單的 MyBatis 教程（一）

史上最簡單的 MySQL 教程（十）「列型別之日期時間型」

史上最簡單的iOS教程（三）

史上最全的MySQL高性能優化實戰總結！

Tensorflow史上最全的視訊教程

史上最全的使用RecyclerView實現下拉重新整理和上拉載入更多

史上最全Java面試題（帶全部答案）

史上最全的BeautifulSoup解析（基本選擇器，標準選擇器，css選擇器）

git詳細使用教程入門到精通(史上最全的git教程)

史上最全Java面試題（帶全部答案，你可能要收藏！）

（轉）史上最全人工智慧產品清單（1/3）

史上最全Bootstrap 3從基礎入門到實戰開發教程大合集

這可能是史上最全的簡歷教程

史上最全IO框架五（緩衝流）

螞蟻課堂史上最全SpringBoot視訊教程

Python爬蟲人工智能大數據全棧視頻史上最全合輯教程分享！

史上最簡單的 MySQL 教程（二十三）「資料的高階操作之查詢（上）」

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

前言：經過前兩節的學習，我們已經可以創建一個vue工程了。下面我們將一起來學習制作一個簡單的實戰案例。

一、 項目說明

ps：這個簡單小項目只提供一個小小小的骨架，需要向“它”身上具體加多少“肉”，需要大家考慮好功能和布局後進行完善。

分析後是不是覺得so easy呢！很好那麽我們就一起來搞一下！！

二、 配置目錄文件

ps: 1.具體文件夾以及文件名稱可根據自己項目進行“自擬”。 2.這裏的每一個*.vue文件都是一個組件。

三、配置相關接口

註意：下面的註釋不要復制進去。否則可能會報錯。

簡單說明：

四、編寫頁面代碼

1. 頁面入口index.html：

2. 主要模版home.vue：這個是來展示數據的，並通過vue的路由展示到index.html。

相關推薦

一、項目說明

二、配置目錄文件