如何把vue封装成app

没想到去年写的一个小demo 至今都还有人在看，诚惶诚恐。时隔一年，技术都有了一轮的更新，之前的 imitate-one 这个demo 已经算是一个过期的例子了，最近写了一个新的demo，具体请看github，欢迎点赞提Issues;

贴一下效果：

线上效果请戳这里;(在chrome下请调成手机模式预览)；

或者手机扫码：

二维码

效果gif:

效果

这个demo 比之前那个稍微复杂一些，如果是对于刚入门的同学，也可以参考之前那个简单的例子，为了方便看效果，之前的例子又重新部署到了服务器上，可以在线查看。

2018-10-14声明结束，原文如下##

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

服务器重新部署了，线上预览的效果可以再查看，想要看实际效果的请到github上克隆代码到本地运行查看。*

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

二维码

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

关于vue项目怎么部署到服务器，我写了一个小教程一步步教你怎么把vue项目部署到Node服务器上;有需要的可以看看，另外如果觉得这篇不好理解，可以先看看我的另一篇vue2 + webpack + node 开发一个小demo;

一、搭建项目结构###

安装好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文件夹下新建、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里面新建文件，页面结构与上述的组件相同，这个页面分为两个部分，第一屏的图片和文字，第二屏的文章和问题，这些数据都是从[one]app的官方地址爬取的。下面是模板的部分代码：

重点说一下对应的JS 代码的部分：

后台接口：爬取数据和解析数据的过程要在后台完成，所以在后台定义一个接口：/homeData;这里的后台是用的express框架，在server文件夹下面新建rou文件：

文件 var http = require("http"); var router = ex(); var cheerio = require("cheerio"); //cheerio 模块，用于对怕爬取到的页面做解析，得到想要的数据， var fs = require("fs"); rou("/homeData",function(req,res){ var homeDesc = {}, _html; (";,function(response){ re("data",function(chunk){ _html += chunk; }); re("end",function(){ con("爬取结束"); $ = c(_html); var homeLink = ($(".link-div a").attr("href")).split("/"); = homeLink[ -1]; = $(".day").text(); = $(".month").text(); = $(".text-content-short").text(); = $(".link-div a").attr("href"); = $(".home-img").attr("style"); res.send({"homeDesc":homeDesc}); //爬取结束后返回数据 }); }).on("error",function(err){ con(err) }); }); module.exports = router;

在rou里引入了一个cheerio模块，这个模块使用解析爬取到的页面的，其实cheerio 就是一个删减版的jquery ，用法与jquery 类似，因为是在后台使用的，所以去掉了jquery 中适配浏览器的部分。引入前需要先安装，在命令行输入命令：npm install cheerio --save-dev等待安装结束就可以了。
这里的爬虫也是非常简单的，只用到了http API 的get方法，不了解这个方法的请看node官方文档.这里爬取的是页面，不是接口，所以得到的是HTML代码，想实践的童鞋可以把_html打出来看看。
那么，这个ruoter在哪里用呢？请看build文件夹下的dev-文件，这里就是服务器的配置啦。可以看到用vue-cli 工具构建的项目本身就是使用的express 做后台，所以只需要在dev-文件里引入刚才的路由，即添加以下两行代码即可：

var router = require("../server/router"); a(router);

在对应的js代码里，使用vue-resource调用这个接口，这里也需要在命令行安装这个模块：npm install vue-resource --save-dev。在正确从后台请求道数据后，将数据赋值给 ,并隐藏掉loading，即设置 showLoading为 false。
点击跳转详情页面：在template里可以看到，给class 为home-bg的div元素绑定了一个click事件articlesToPicture)，这个函数是长这样的：

toDetail: function(id){ this.$rou("/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'

然后引入刚才的:

var home = require("../pages/")

然后定义路由：

var routes = [ {path:"/",component:home} ]; Vue.use(Router) Vue.use(VueResource); export default new Router({ routes });

那么这个路由是在哪里用的哪？还是在src目录下有一个main.js文件，就是这儿里啦。打开看一眼,里面已经引入了刚才定义的路由，这个引入是用vue-cli构建项目的时候就帮你完成了。

三、其他部分###

其实主要用到的方法和思路第二大点里已经全部说到了，只需要照着这个思路完成后面的阅读、图文、音乐、影视、关于以及各个部分的详情页面即可。凡是要爬取数据的，都需要在后台进行，然后将得到的数据返回给前台渲染到页面上。

四、最终效果##

对于手机在身边的盆友，可以扫描下面的二维码，体验在线的效果

二维码

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

最后放几张效果图的截图：

首页：

home

菜单：

home

音乐：

home

阅读：

home

重点来了

完整版代码，我放在github 了，有需要的请戳这里，并顺手给个star吧;。

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

作者：被劫持的豆瓣酱

链接：

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

1.《如何把vue封装成app》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《如何把vue封装成app》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/keji/3264543.html

如何把vue封装成app

如何把s0中的vlan删除