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

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

这一篇讲一个复杂一点的完整的例子，仿制一个H5 APP，这个APP就叫[one.一个]，在百度搜索 one 就能找到啦[为什么仿这个呢，因为这是我用了很久的一个app呀 ]。

完整代码放在了github，戳这里,顺便求个star,对于手机在身边的盆友，可以扫描下面的二维码，体验在线的效果

对于不方便使用手机的童鞋，请戳在线效果;(注：请在chrome下调成手机模式预览)

一、搭建项目结构

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文件夹；

二、开发

编写共用的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 吧，给不了吃亏，给不了上当。

另：如有改进意见欢迎反馈，谢谢。