手把手教你用Vue2+webpack+node開發一個H5 app##
前一篇vue2 + webpack + node 開發一個小demo說到了用vue的一些基本用法，這一篇就講一個復雜一點的更完整的例子，仿制一個H5 APP，這個APP就叫[one.一個]，在百度搜索 one 就能找到啦[為什么仿這個呢，因為這是我用了很久的一個app呀 😆 ]。
完整代碼放在了github，戳這里,順便求個star,對於手機在身邊的盆友，可以掃描下面的二維碼，體驗在線的效果
對於不方便使用手機的童鞋，請戳在線效果;(注：請在chrome下調成手機模式預覽)
一、搭建項目結構###
-
安裝好node和npm環境之后，安裝webpack:
npm install webpack -g; -
安裝vue-cli構建工具:
npm install vue-cli -g; -
創建vue項目:
vue init webpack one; //這里 one 是項目名 -
進入文件目錄：
cd one; -
安裝依賴項:
npm install; -
啟動項目:
npm run dev; -
新建server文件夾，存放后端代碼，再進入scr目錄，新建
pages文件夾；
二、開發####
編寫共用的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構建項目的時候就幫你完成了。
三、其他部分###
其實主要用到的方法和思路第二大點里已經全部說到了，只需要照着這個思路完成后面的閱讀、圖文、音樂、影視、關於以及各個部分的詳情頁面即可。凡是要爬取數據的，都需要在后台進行，然后將得到的數據返回給前台渲染到頁面上。
四、最終效果##
對於手機在身邊的盆友，可以掃描下面的二維碼，體驗在線的效果
對於不方便使用手機的童鞋，請戳在線效果;(注：請在chrome下調成手機模式預覽)
最后放幾張效果圖的截圖：
首頁：
;
菜單：
;
音樂：
;
閱讀：
重點來了
完整版代碼，我放在github 了，有需要的請戳這里，並順手給個star吧;不需要的也請戳這里無私的給個star 吧，給不了吃虧，給不了上當。
另：如有改進意見歡迎反饋，謝謝。