手把手教你用Vue2+webpack+node开发一个H5 app
这一篇讲一个复杂一点的完整的例子,仿制一个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 吧,给不了吃亏,给不了上当。
另:如有改进意见欢迎反馈,谢谢。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。