vue做混合式app_使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app...

近几年，混合模式移动应用的概念甚嚣尘上，受到了一些中小型企业的青睐，究其原因，混合模式开发可以比传统移动开发节约大量的开发成本和人力成本。

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

说白了，如果走传统移动开发路线，公司业务覆盖多端，那么每个平台势必要请一个专属开发人员，安卓要请一个前端开发，ios同理，那么人力成本则进行了翻倍，同时，如果多端使用不同的代码，当有功能上的修改或者维护时，成本也是不可想象的。试想如果开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，这绝对是省时省力的良好方案。

本文介绍如果使用vue.js编写基于h5的适配多端的前端代码，打包后，利用hbuilder打包成安卓客户端安装包apk，从而达到一套代码适配多个平台的功能。

首先，安装完整版的vue-cli，之前为了快速开发使用simple版，实际上如果做移动开发，要使用完整版的vue-cli

安装cnpm

npm install-g cnpm --registry=https://registry.npm.taobao.org

安装完整版 vue.js

cnpm install-g vue-cli

cnpm cache clean--force

建立项目

vue init webpack myvue

进入项目 热启动

cd myvue

cnpm run dev

建好项目之后，如何将页面进行响应式设计开发(就是适配多个屏幕)呢？我们需要利用bootstrap框架来帮我们适配大小屏幕，这里引入bootstrap的外部css，修改入口文件main.js，加入下面代码

require('!style-loader!css-loader!./assets/assets_2/main.css');

如果报错说明没有安装依赖库，安装一下

cnpm install style-loader --save

然后新建一个首页路由index.vue,添加下面的代码

Toggle navigation

极速视频网络平台

极速视频网络平台

视频分类