手把手教你用Vue2+webpack+node开发一个H5app

手把手教你用Vue2+webpack+node开发一个H5app这篇文章讲了一个更复杂更完整的例子，模仿一个H5app，这个app叫[one.one]，百度搜one就能找到【为什么要模仿这个，因为这是我用了很久的app】。完整代码放在github上，点这里，顺便求个star，有手机的朋友可以扫描下方二维码体验在线效果。不方便使用手机的童鞋请点击在线效果；（注：chrome请切换到手机模式预览）1.搭建项目结构安装好node和npm环境后，安装webpack:npminstallwebpack-g;安装vue-cli构建工具：npminstallvue-cli-g；创建一个vue项目：vueinitwebpackone；//这里one是项目名进入文件目录：cdone;安装依赖项：npminstall；启动项目：npmrundev；新建server文件夹，存放后台代码，然后进入scr目录，新建pages文件夹；2、常用header、menu、loading组件的开发编写：在components文件夹下创建header.vue、menu.vue、loading.vue三个文件。文件的基本结构如下【注意：template标签下，必须有根元素将标签包裹在里面，否则会报错，这是vue模板的规定】：这两个组件之间没有数据交互，是静态样式，和正常开发一样。开发vue视图：在pages中新建home.vue文件。页面结构与上述组件相同。这个页面分为两个部分，第一屏是图片和文字，第二屏是文章和问题。这些数据是从[one]app的官方地址爬取的。这是模板代码的一部分：重点说说对应部分的JS代码：后台接口：爬取数据和解析数据的过程必须在后台完成，所以在后台定义一个接口：/homeData；这里的后台是express框架，在server文件夹下新建routers.js文件：//router.jsfilevarhttp=require("http");varrouter=express.Router();varcheerio=require("cheerio");//cheerio模块，用于解析爬取的页面，获取想要的数据，varfs=require("fs");router.get("/homeData",function(req,res){varhomeDesc={},_html;http.get("http://m.wufazhuce.com/",function(response){response.on(“数据”，函数（块）{_html+=块；}）；response.on("end",function(){console.log("爬行结束");$=cheerio.load(_html);varhomeLink=($(".link-diva").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-diva").attr("href");homeDesc.bgImg=$(".home-img").attr("style");res.send({"homeDesc":homeDesc});//抓取结束返回数据});}).on("错误",function(err){console.log(err)});});module.exports=router;在router.js中引入了一个cheerio模块，该模块通过解析来抓取页面，其实cheerio是jquery的精简版。它的用法类似于jquery。因为是后台使用，去掉了jquery的浏览器适配部分。在引入它之前需要安装它。在命令行输入命令：npminstallcheerio--save-dev等待安装结束即可。这里的爬虫也很简单。它只使用httpAPI的get方法。如果对这个方法不理解，请参考node官方文档。这里爬取的是页面，不是界面，所以得到的是HTML代码。想要练习的童鞋可以打出_html看看。那么，这个ruoter用在什么地方呢？请看build文件夹下的dev-server.js文件，这里是服务器的配置。可以看到使用vue-cli工具搭建的项目本身就是使用express作为后台的，所以只需要在dev-server.js文件中引入刚才的路由即可，即添加如下两行代码：varrouter=require("../server/router");应用程序使用（路由器）；在home.vue对应的js代码中，使用vue-resource调用这个接口，这里还需要在命令行安装这个模块：npminstallvue-resource--save-dev。后台正确请求数据后，将数据赋值给this.homeDesc，并隐藏loading，即设置showLoading为false。点击跳转详情页：在模板中可以看到，类为home-bg的div元素绑定了一个点击事件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：importVuefrom'vue'importRouterfrom'vue-router'importVueResourcefrom'vue-resource'然后导入刚才的home.vue：varhome=require("../pages/home.vue")并定义路由：varroutes=[{path:"/",component:home}];Vue.use(路由器)Vue.use(VueResource);导出默认新路由器（{路由}）；那么这条路由用在什么地方呢？src目录下还有一个main.js文件，就在这里。打开看看。刚才定义的路由已经引入。这个介绍是在你使用vue-cli构建项目的时候为你做的。3.其实其他部分用到的主要方法和思路在第二点都已经提到了。你只需要按照这个思路完成后面的阅读、图文、音乐、视频、关于和详情页各部分。所有的爬取数据都需要在后台完成，然后将获取到的数据返回到前台渲染到页面上。4.最后的效果。有手机的朋友可以扫描下方二维码体验在线效果。不方便使用手机的童鞋，请戳在线效果；（注意：请切换到手机模式在chrome中预览）最后放几张效果图截图：首页：；菜单：;音乐：;请戳这里，无私的给个star，吃不亏，骗不了。另：欢迎反馈改进，谢谢。