[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","eidonlon","page",1,"limit",20,"total","id","29135","avatar_url","https://avatars0.githubusercontent.com/u/12473032?v=4","githubUsername","create_at","2017-07-11 06:25:13.136","score",15,"topic_count","reply_count",2,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"26327","author_id","tab","share","content","## 手把手教你用Vue2+webpack+node开发一个H5 app##\r\n\r\n这一篇讲一个复杂一点的完整的例子，仿制一个H5 APP，这个APP就叫[one.一个]，在百度搜索 one 就能找到啦[为什么仿这个呢，因为这是我用了很久的一个app呀 :laughing: ]。\r\n\r\n**完整代码放在了github，[戳这里](https://github.com/eidonlon/imitate-One),顺便求个star,对于手机在身边的盆友，可以扫描下面的二维码，体验在线的效果**\r\n ![二维码](http://imitateone-ailidan.rhcloud.com/static/images/link.png)\r\n**对于不方便使用手机的童鞋，请戳[在线效果](https://imitateone-ailidan.rhcloud.com/#/);(注：请在chrome下调成手机模式预览)**\r\n\r\n### 一、搭建项目结构\r\n\r\n1. 安装好node和npm环境之后，安装webpack: `npm install webpack -g`;\r\n\r\n2. 安装vue-cli构建工具: `npm install vue-cli -g`;\r\n\r\n3. 创建vue项目: `vue init webpack one`; //这里 one 是项目名\r\n\r\n4. 进入文件目录：`cd one`;\r\n\r\n5. 安装依赖项: `npm install`;\r\n\r\n6. 启动项目: `npm run dev`;\r\n\r\n7. 新建server文件夹，存放后端代码，再进入scr目录，新建`pages`文件夹；\r\n\r\n#### 二、开发\r\n\r\n1. 编写共用的header、menu和loading组件：在components文件夹下新建`header.vue`、`menu.vue`和`loading.vue`三个文件，文件的基本结构如下[注：在template标签下，必须要有一个根元素，将里面的各个标签包裹起来，否则会报错，这是vue模板的规定]：\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\n 这两个组件没有什么数据交互，就是静态的样式，就和平常的开发相同啦。\r\n\r\n2. 开发vue视图：在pages里面新建home.vue文件，页面结构与上述的组件相同，这个页面分为两个部分，第一屏的图片和文字，第二屏的文章和问题，这些数据都是从[one]app的[官方地址](http://m.wufazhuce.com/)爬取的。下面是模板的部分代码：\r\n\r\n ```html\r\n\t \r\n ```\r\n\r\n 重点说一下对应的JS 代码的部分：\r\n\r\n ```javascript\r\n\t \r\n ```\r\n\r\n3. 后台接口：爬取数据和解析数据的过程要在后台完成，所以在后台定义一个接口：`/homeData`;这里的后台是用的express框架，在server文件夹下面新建routers.js文件：\r\n\r\n ```javascript\r\n\t //router.js文件\r\n \r\n\t var http = require(\"http\");\r\n\t var router = express.Router();\r\n\t var cheerio = require(\"cheerio\"); //cheerio 模块，用于对怕爬取到的页面做解析，得到想要的数据，\r\n\t var fs = require(\"fs\");\r\n \r\n\t router.get(\"/homeData\",function(req,res){\r\n\t var homeDesc = {},\r\n\t\t _html;\r\n\t http.get(\"http://m.wufazhuce.com/\",function(response){\r\n\t\t response.on(\"data\",function(chunk){\r\n\t\t\t _html += chunk;\r\n\t\t });\r\n\t\t response.on(\"end\",function(){\r\n\t\t\t console.log(\"爬取结束\");\r\n\t\t\t \r\n\t\t\t $ = cheerio.load(_html);\r\n\t\t\t var homeLink = ($(\".link-div a\").attr(\"href\")).split(\"/\");\r\n\t\t\t homeDesc.id = homeLink[homeLink.length -1];\r\n\t\t\t homeDesc.day = $(\".day\").text();\r\n\t\t\t homeDesc.month = $(\".month\").text();\r\n\t\t\t homeDesc.textShort = $(\".text-content-short\").text();\r\n\t\t\t homeDesc.href = $(\".link-div a\").attr(\"href\");\r\n\t\t\t homeDesc.bgImg = $(\".home-img\").attr(\"style\");\r\n\t\t\t res.send({\"homeDesc\":homeDesc}); //爬取结束后返回数据\r\n\t\t });\r\n\t }).on(\"error\",function(err){\r\n\t\t console.log(err)\r\n\t });\r\n\t });\r\n\t module.exports = router;\r\n ```\r\n\r\n \t在router.js里引入了一个`cheerio`模块，这个模块使用解析爬取到的页面的，其实cheerio 就是一个删减版的jquery ，用法与jquery 类似，因为是在后台使用的，所以去掉了jquery 中适配浏览器的部分。引入前需要先安装，在命令行输入命令：`npm install cheerio --save-dev`等待安装结束就可以了。\r\n\r\n \t这里的爬虫也是非常简单的，只用到了http API 的get方法，不了解这个方法的请看[node官方文档](http://nodejs.cn/api/http.html#http_http_get_options_callback).这里爬取的是页面，不是接口，所以得到的是HTML代码，想实践的童鞋可以把_html打出来看看。\r\n\r\n \t那么，这个ruoter在哪里用呢？请看build文件夹下的dev-server.js文件，这里就是服务器的配置啦。可以看到用vue-cli 工具构建的项目本身就是使用的express 做后台，所以只需要在dev-server.js文件里引入刚才的路由，即添加以下两行代码即可：\r\n\r\n ```javascript\r\n\t var router = require(\"../server/router\");\r\n\t app.use(router);\r\n ```\r\n\r\n4. 在home.vue对应的js代码里，使用vue-resource调用这个接口，这里也需要在命令行安装这个模块：`npm install vue-resource --save-dev`。在正确从后台请求道数据后，将数据赋值给 `this.homeDesc`,并隐藏掉loading，即设置 `showLoading`为 `false`。\r\n\r\n5. 点击跳转详情页面：在`template`里可以看到，给class 为`home-bg`的`div`元素绑定了一个click事件`articlesToPicture(homeDesc.id)`，这个函数是长这样的：\r\n\r\n ```javascript\r\n\t toDetail: function(id){\r\n\t this.$router.push(\"/pictureDetail?id=\"+id)\r\n\t },\t\r\n ```\r\n\r\n 其实就是一个带参跳转而已，对于这个路由的设置不了解的请戳[vue-router官方文档](https://router.vuejs.org/zh-cn/),，参数id就是这篇图文的id,因为详情也是爬取的数据，在爬取的时候需要用到这个ID。\r\n\r\n6. vue的路由配置:在src文件夹下有一个router文件夹，里面有一个index.js文件，就在这里配置啦。先引入vue-router和vue-resource:\r\n\r\n ```javascript\r\n\t import Vue from 'vue'\r\n\t import Router from 'vue-router'\r\n\t import VueResource from 'vue-resource'\r\n ```\r\n\r\n 然后引入刚才的home.vue:\r\n\r\n ```javascript\r\n\t var home = require(\"../pages/home.vue\")\r\n ```\r\n\r\n 然后定义路由：\r\n \r\n ```javascript\r\n\t var routes = [\r\n\t {path:\"/\",component:home}\r\n\t ];\r\n\t Vue.use(Router)\r\n\t Vue.use(VueResource);\r\n \r\n\t export default new Router({\r\n\t routes\r\n\t });\r\n```\r\n7. 那么这个路由是在哪里用的哪？还是在src目录下有一个main.js文件，就是这儿里啦。打开看一眼,里面已经引入了刚才定义的路由，这个引入是用vue-cli构建项目的时候就帮你完成了。\r\n\r\n### 三、其他部分###\r\n\r\n 其实主要用到的方法和思路第二大点里已经全部说到了，只需要照着这个思路完成后面的阅读、图文、音乐、影视、关于以及各个部分的详情页面即可。凡是要爬取数据的，都需要在后台进行，然后将得到的数据返回给前台渲染到页面上。\r\n\r\n## 四、最终效果##\r\n\r\n 对于手机在身边的盆友，可以扫描下面的二维码，体验在线的效果\r\n ![二维码](http://imitateone-ailidan.rhcloud.com/static/images/link.png)\r\n\r\n 对于不方便使用手机的童鞋，请戳[在线效果](https://imitateone-ailidan.rhcloud.com/#/);(注：请在chrome下调成手机模式预览)\r\n\r\n 最后放几张效果图的截图：\r\n\r\n 首页：\r\n ![home](http://imitateone-ailidan.rhcloud.com/static/images/home.jpg);\r\n\r\n 菜单：\r\n ![home](http://imitateone-ailidan.rhcloud.com/static/images/menu.jpg);\r\n\r\n音乐：\r\n ![home](http://imitateone-ailidan.rhcloud.com/static/images/music.jpg);\r\n\r\n 阅读：\r\n ![home](http://imitateone-ailidan.rhcloud.com/static/images/read.jpg)\r\n \r\n\r\n**重点来了**\r\n\r\n 完整版代码，我放在github 了，有需要的请[戳这里](https://github.com/eidonlon/imitate-One)，并顺手给个star吧;不需要的也请[戳这里](https://github.com/eidonlon/imitate-One)无私的给个star 吧，给不了吃亏，给不了上当。\r\n\r\n 另：如有改进意见欢迎反馈，谢谢。","title","手把手教你用Vue2+webpack+node开发一个H5 app","last_reply_at","2017-07-19 01:14:50.18","good","top",4,"visit_count",6548,"2017-07-11 06:30:22.912","author",{"_13":14,"_22":23}]

{{homeDesc.day}}