近幾年，混合模式移動應用的概念甚囂塵上，受到了一些中小型企業的青睞，究其原因，混合模式開發可以比傳統移動開發節約大量的開發成本和人力成本。
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,添加下面的代碼
<template> <div> <header class=""> <div class="navbar navbar-default visible-xs"> <button type="button" class="navbar-toggle collapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">極速視頻網絡平台</a> </div> <nav class="sidebar"> <div class="navbar-collapse" id="navbar-collapse"> <div class="site-header hidden-xs"> <a class="site-brand" href="./index.html" title=""> <img class="img-responsive site-logo" alt="" src="../assets/assets_2/images/mashup-logo.svg"> 極速視頻網絡平台 </a> <p> 視頻分類 </p> </div> <ul class="nav"> <li><a href="./index.html" title="">首頁</a></li> <li><a href="./about.html" title="">視頻詳情頁</a></li> <li><a href="./services.html" title="">Services</a></li> <li><a href="./contact.html" title="">Contact</a></li> <li><a href="./components.html" title="">Components</a></li> </ul> <nav class="nav-footer"> <p class="nav-footer-social-buttons"> <a class="fa-icon" href="https://www.instagram.com/" title=""> <i class="fa fa-instagram"></i> </a> <a class="fa-icon" href="#" title=""> <i class="fa fa-dribbble"></i> </a> <a class="fa-icon" href="#" title=""> <i class="fa fa-twitter"></i> </a> </p> </nav> </div> </nav> </nav> </header> <main class="" id="main-collapse"> <div class="hero-full-wrapper"> <div v-masonry transition-duration="0.3s" item-selector=".grid-item" class="grid"> <div class="gutter-sizer"></div> <div class="grid-sizer"></div> <div v-masonry-tile class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-12.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>視頻標題</h3> <p>視頻簡介</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-05.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-13.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-04.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-07.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-11.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-10.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> <div class="grid-item"> <img class="img-responsive" alt="" src="../assets/assets_2/images/img-03.jpg"> <a href="./project.html" class="project-description"> <div class="project-text-holder"> <div class="project-text-inner"> <h3>Vivamus vestibulum</h3> <p>Discover more</p> </div> </div> </a> </div> </div> </div> </main> </div> </template> <script> export default { data () { return { msg: "這是一個變量", dataList:[], clicked:0, upath: '', result: '', uping:0 } }, mounted:function(){ }, methods:{ changetest(index){ this.clicked = index; } } } </script>
此時，發現樣式已經生效了，但是我們想讓首頁使用瀑布式的布局，也就是快手和抖音常用的那種首屏流動式布局，所以需要安裝vue-masonry，這個vue.js組件可以很方便的將布局改造成瀑布式的。
安裝庫
cnpm install vue-masonry --save
然后在入口文件進行引入和聲明
import {VueMasonryPlugin} from 'vue-masonry'; Vue.use(VueMasonryPlugin)
最后，針對模板文件進行改造就可以了
<div v-masonry transition-duration="0.3s" item-selector=".item"> <div v-masonry-tile class="item" v-for="(item, index) in blocks"> <!-- block item markup --> </div> </div>
效果是這樣的
然后我們對項目進行打包，在打包之前，修改config目錄下的index.js,將build中的assetsPublicPath屬性改成相對路徑：assetsPublicPath: './',另外如果你的路由模式使用的history，請改為hash，或者使用默認模式，因為移動app不支持history模式，最后打包項目
cnpm run build
vue.js將會包項目直接打包在dist文件夾中，這時，下載hbuilder安裝包 http://www.dcloud.io/hbuilderx.html，要下載app開發版，將dist直接拖動到hbuilder開發界面中，然后右鍵轉換為移動app
這時系統會幫你創建一個配置文件manifest.json，轉換完畢之后，點擊index.html,選擇運行，瀏覽器運行，進行測試
打包成功后，就可以下載apk安裝包在手機中安裝使用了。
其效果和安卓原生系統完全沒有差別，一套代碼，完美適配pc端和移動端，就是這么簡單，最后奉上完整代碼倉庫地址：https://gitee.com/QiHanXiBei/vue_app