手把手教你用Vue2+webpack+node開發一個H5 app

手把手教你用Vue2+webpack+node開發一個H5 app

​前一篇vue2 + webpack + node 開發一個小demo說到了用vue的一些基本用法，這一篇就講一個複雜一點的更完整的例子，仿製一個H5 APP，這個APP就叫[one.一個]，在百度搜索 one 就能找到啦[爲何仿這個呢，由於這是我用了好久的一個app呀 😆 ]。

完整代碼放在了github，戳這裏,順便求個star,對於手機在身邊的盆友，能夠掃描下面的二維碼，體驗在線的效果

對於不方便使用手機的童鞋，請戳在線效果;(注：請在chrome下調成手機模式預覽)

1、搭建項目結構

1. 安裝好node和npm環境以後，安裝webpack: npm install webpack -g;

2. 安裝vue-cli構建工具: npm install vue-cli -g;

3. 建立vue項目: vue init webpack one; //這裏 one 是項目名

4. 進入文件目錄：cd one;

5. 安裝依賴項: npm install;

6. 啓動項目: npm run dev;

7. 新建server文件夾，存放後端代碼，再進入scr目錄，新建pages文件夾；

2、開發

編寫共用的header、menu和loading組件：在components文件夾下新建header.vue、menu.vue和loading.vue三個文件，文件的基本結構以下[注：在template標籤下，必需要有一個根元素，將裏面的各個標籤包裹起來，不然會報錯，這是vue模板的規定]：

<template>
        <div class="header">
          <!-- 細節代碼 -->
        </div>
   </template>
   <script>
   export default {
    name: "header",
    data:function(){
        return {data:"this is header"}
    }
   }
   </script>
   <style>
     /*樣式代碼*/
   </style>

這兩個組件沒有什麼數據交互，就是靜態的樣式，就和日常的開發相同啦。

開發vue視圖：在pages裏面新建home.vue文件，頁面結構與上述的組件相同，這個頁面分爲兩個部分，第一屏的圖片和文字，第二屏的文章和問題，這些數據都是從[one]app的官方地址爬取的。下面是模板的部分代碼：

<template>
     <div class="home-box">
       <div class="home-bg"  :style="homeDesc.bgImg"  @click="toDetail(homeDesc.id)">
         <div class="home-bgcolor">
           <div class="home-desc">
             <h4 class="home-day">{{homeDesc.day}}</h4>
             <p class="home-month">{{homeDesc.month}}</p>
             <p class="home-text-short">{{homeDesc.textShort}}</p>
           </div>
         </div>
         <one-load v-show="showLoading"></one-load>
       </div>
       <!--首屏文字和圖片完-->
       <!--其餘代碼
            .....
        -->
     </div>
   </template>

重點說一下對應的JS 代碼的部分：

<script>
   import oneLoad from "../components/loading.vue" //引入loading組件,在數據加載時顯示,他的顯示隱藏由 showLoading的值決定
   export default {
     name: 'home',
     components:{
       oneLoad 
     },
     data:function(){
       return {
         msg: 'Welcome to one demo',
         showLoading:true,
         homeDesc:{}
       }
     },
     created:function(){
       this.getDatas();
     },
     methods:{
       getDatas:function(){  //從後臺獲取數據
         this.$http.get("/homeData").then(response => {   //使用了vue-resource去請求後臺接口
           this.homeDesc = response.body.homeDesc;
           this.showLoading = false;
         },error => {
           console.log(error);
         });
       }
   }
   </script>

後臺接口：爬取數據和解析數據的過程要在後臺完成，因此在後臺定義一個接口：/homeData;這裏的後臺是用的express框架，在server文件夾下面新建routers.js文件：

//router.js文件

   var http = require("http");
   var router = express.Router();
   var cheerio = require("cheerio");  //cheerio 模塊，用於對怕爬取到的頁面作解析，獲得想要的數據，
   var fs = require("fs");

   router.get("/homeData",function(req,res){
    var homeDesc = {},
        _html;
    http.get("http://m.wufazhuce.com/",function(response){
        response.on("data",function(chunk){
            _html += chunk;
        });
        response.on("end",function(){
            console.log("爬取結束");
             
            $ = cheerio.load(_html);
            var homeLink = ($(".link-div a").attr("href")).split("/");
            homeDesc.id = homeLink[homeLink.length -1];
            homeDesc.day = $(".day").text();
            homeDesc.month = $(".month").text();
            homeDesc.textShort = $(".text-content-short").text();
            homeDesc.href = $(".link-div a").attr("href");
            homeDesc.bgImg = $(".home-img").attr("style");
            res.send({"homeDesc":homeDesc});  //爬取結束後返回數據
        });
    }).on("error",function(err){
        console.log(err)
    });
   });
   module.exports = router;

​ 在router.js裏引入了一個cheerio模塊，這個模塊使用解析爬取到的頁面的，其實cheerio 就是一個刪減版的jquery ，用法與jquery 相似，由於是在後臺使用的，因此去掉了jquery 中適配瀏覽器的部分。引入前須要先安裝，在命令行輸入命令：npm install cheerio --save-dev等待安裝結束就能夠了。

​ 這裏的爬蟲也是很是簡單的，只用到了http API 的get方法，不瞭解這個方法的請看node官方文檔.這裏爬取的是頁面，不是接口，因此獲得的是HTML代碼，想實踐的童鞋能夠把_html打出來看看。

​ 那麼，這個ruoter在哪裏用呢？請看build文件夾下的dev-server.js文件，這裏就是服務器的配置啦。能夠看到用vue-cli 工具構建的項目自己就是使用的express 作後臺，因此只須要在dev-server.js文件裏引入剛纔的路由，即添加如下兩行代碼便可：

var router = require("../server/router");
   app.use(router);

在home.vue對應的js代碼裏，使用vue-resource調用這個接口，這裏也須要在命令行安裝這個模塊：npm install vue-resource --save-dev。在正確從後臺請求道數據後，將數據賦值給 this.homeDesc,並隱藏掉loading，即設置 showLoading爲 false。

點擊跳轉詳情頁面：在template裏能夠看到，給class 爲home-bg的div元素綁定了一個click事件articlesToPicture(homeDesc.id)，這個函數是長這樣的：

toDetail: function(id){
     this.$router.push("/pictureDetail?id="+id)
   },

其實就是一個帶參跳轉而已，對於這個路由的設置不瞭解的請戳vue-router官方文檔,，參數id就是這篇圖文的id,由於詳情也是爬取的數據，在爬取的時候須要用到這個ID。

vue的路由配置:在src文件夾下有一個router文件夾，裏面有一個index.js文件，就在這裏配置啦。先引入vue-router和vue-resource:

import Vue from 'vue'
   import Router from 'vue-router'
   import VueResource from 'vue-resource'

而後引入剛纔的home.vue:

var home = require("../pages/home.vue")

而後定義路由：

var routes = [
    {path:"/",component:home}
   ];

   Vue.use(Router)
   Vue.use(VueResource);

   export default new Router({
     routes
   });

那麼這個路由是在哪裏用的哪？仍是在src目錄下有一個main.js文件，就是這兒裏啦。打開看一眼,裏面已經引入了剛纔定義的路由，這個引入是用vue-cli構建項目的時候就幫你完成了。

3、其餘部分

其實主要用到的方法和思路第二大點裏已經所有說到了，只須要照着這個思路完成後面的閱讀、圖文、音樂、影視、關於以及各個部分的詳情頁面便可。凡是要爬取數據的，都須要在後臺進行，而後將獲得的數據返回給前臺渲染到頁面上。

​

4、最終效果

對於手機在身邊的盆友，能夠掃描下面的二維碼，體驗在線的效果

對於不方便使用手機的童鞋，請戳在線效果;(注：請在chrome下調成手機模式預覽)

最後放幾張效果圖的截圖：

首頁：
;

菜單：
;

音樂：
;

閱讀：

​

重點來了

完整版代碼，我放在github 了，有須要的請戳這裏，並順手給個star吧;不須要的也請戳這裏無私的給個star 吧，給不了吃虧，給不了上當。

另：若有改進意見歡迎反饋，謝謝。