2. 程式人生 > >vue+cordova 開發混合app入門指南

vue+cordova 開發混合app入門指南

阿新 • • 發佈：2019-02-04

本文介紹基於VUE+cordova開發混合式APP

執行命令:

一：npm install -g vue-cli   安裝全域性vue
二：vue init webpack porjectNme  （projectName是專案名字）
三：cd porjectNme
四：npm install --registry=https://registry.npm.taobao.org  （等價於npm install ，我使用淘寶映象下載，速度會比較快）

五：npm run dev  （本地執行）
六：npm run build （打包，會生成dist檔案）


上述成功建立vue專案的生成環境（src目錄下）和釋出環境（dist）

下面建立cordova工程

一：npm install -g cordova   全域性安裝cordova
二：cordova create ProjectName   建立ProjectName cordova專案    
三：cd ProjectName
四：cordova platform add android   新增android平臺（ios也如此————也可標註android版本（例如：··add [email protected]））
五：cordova run android

這個www-base-test是我自己弄的，可以忽略

到這個步驟，cordova專案也建立完畢，這個時候開啟 platforms\android\assets\www 目錄下的index.html

拷貝里面的：六：npm run build （打包，會生成dist檔案）

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta 
 
name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
和JS 
<script type="text/javascript" src="cordova.js"></script>
其他的都不需要修改。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>vueapp</title>
  </head>
  <body>
    <div id="app"></div>
<!-- built files will be auto injected -->
</body>
  <script type="text/javascript" src="cordova.js"></script>
</html>
這個時候回到vue專案
重新打包
npm run build
把重新打包後dist檔案裡面的檔案拷貝到cordova專案下的www裡面（platforms\android\assets\www （可刪掉這個資料夾下原本的檔案）） 好啦！重新執行 
cordova run android
OK ,測試打包完成啦！（platforms\android\build\outputs\apk     檔案下會生成apk檔案，也可以直接插上手機連調哦！）

以上是基於vue+cordova的全過程。至於搭建Android 環境，自己百度。

注：vue中：src下是生產環境

      dist是釋出環境（打包環境）

每次修改後記得重新打包！

相關推薦

vue+cordova 開發混合app入門指南

本文介紹基於VUE+cordova開發混合式APP 執行命令: 一：npm install -g vue-cli   安裝全域性vue 二：vue init webpack porjectNme  （projectName是專案名字） 三：cd porjectN

vue+cordova開發混合app

這篇文章主要記錄了我自己的vue專案如何和cordova結合，最後編譯成安卓app   一、安裝cordova npm install -g cordova ordova安裝時不能使用cnpm 應該使用npm，cnpm雖然快但是後期出的錯絕對比這省下來的時間多得多 二、

ionic3+angular4開發混合app 之自定義組件

符號 mod smo .com 屬性 點擊事件 ppm 知識點 自己 這裏主要是記錄ionic3+angular4開發混合app時自定義組件，我想自定義組件的方法和angular4應該類似，具體在純angular4中自定義組件，暫時沒有實踐，個人覺得差別不大，之後實踐了會再

vue+cordova開發webapp，安裝cordova camera外掛所遇到的坑（Unable to load PlatfomApi from platform......Api.js)

最近老闆讓我用phonegap平臺和vue框架開發一個webapp的一個上傳頭像的介面，初次接觸phonegap，從安裝到使用遇到了好多坑，也查了很多的資料，首先安裝以及配置環境就不多說了大家可以參考： https://blog.csdn.net/webxiaoma/article/de

framework7+vue+webpack 開發web app商城之旅（1）

公司要求使用 framework7+vue+webpack 開發一個web app，關於framework7，vue，webpack的相關介紹就不再贅述，接下來都只是介紹我用framework7+vue+webpack開發這個web app遇到的問題（因為framework7

使用Ionic3開發混合APP的架構設計總結

Ionic在2017年3月7號在其官方部落格宣佈 Ionic3 正式版本釋出，採用最新的Angular4，和以往一樣的scss，Ionic3和2版本的主要區別就是對懶載入的全面使用。在使用Ionic2的時候，如果應用比較大，將所有的component,directives,pipes,serv

初識H5開發混合APP

摘要 隨著智慧手機的普及，使用者對於 App 的需求更加多樣化，從看新聞、看視訊 到購物、繳費都通過 App 實現。目前 App 有兩種形式，一種是原生應用（Native App）， 具有

【DotNetBrowser教程】WPF開發人員快速入門指南

DotNetBrowser能嵌入一個基於Chromium的WPF或WinForms元件到你的.NET應用中，用來顯示使用HTML5、CSS3、JavaScript、Silverlight等技術構建的現代網頁。 在本快速入門指南中，您將學習如何下載DotNetBrowser庫，獲取評估許可證，以及

dcloud開發混合app-訊息推送push

一、這裡使用個推，先註冊個推賬號，申請一個應用。 二、在manifest.json中新增sdk配置和模組許可權配置 三、新增推送訊息事件監聽器 先看一下官方文件： void plus.push.addEventListener( event,

使用Vue構建Ionic混合APP系列教程（四）：資料儲存

大多數應用程式基本都需要儲存一些在應用重新載入時需要的資料。我們經常使用使用者裝置上的本地儲存來實現。當使用Ionic/Angular的時候，我們可以簡單的使用Ionic內建的Storage API，並不需要知道背後的原理——Ionic會自動地選擇最合適的儲存方

使用Vue構建Ionic混合APP系列教程（三）：服務和Http請求

當學習一個新框架的時候，特別是你之前已經使用一個框架很久了，很自然的你會試圖用之前使用的框架來理解一些別的框架的原理。 正如我上一篇文章提到的，Angular是一個結構嚴密的框架，提供了一切開箱即用的東西，不管如何都會有一個正確的方法去解決問題。Vue的結構並

使用Vue構建Ionic混合APP系列教程（二）：導航

這篇教程我們將從Vue裡最基礎的路由/導航開始講起，然後再看看通過Vue構建的Ionic應用如何導航。 在Vue裡引入Ionic的元件（或者任何其他東西）是非常簡單的，就像你在Angular中做的一樣，只需要把他們注入模板裡，不過當我們想在兩個頁面之間導航時稍

Vue + quasar-framework進行Vue混合app開發 ─ Cordova外掛呼叫(二)

開發一個App，怎麼能不呼叫原生的api介面呢，在Quasar中我們可以直接安裝並使用Cordova外掛呼叫原生裝置API，比如獲取裝置資訊，網路資訊，呼叫攝像頭等等。 Cordova外掛只有在deviceready事件被觸發後才可用。 我們不需要擔心太多。 在這個事件被觸發之後，Qua

移動web：原生開發打包，嵌入h5頁面 webApp：全部都是H5開發的應用 混合APP：使用第三方開發平臺從apicloud，appcan，hbuilder等開發，cordova技術打包 原生APP：就是eclipse開發或者studio等工具開發

應用 手機 .com net ack 自動連接 pan 經驗 使用 論壇43213 移動端webApp兼容問題解決 談談App混合開發 Hybrid APP混合開發的一些經驗和總結 PhoneGap是一個采用HTML，CSS和JavaScript的技術，創建

Vue + quasar-framework進行Vue混合app開發 ─ 環境準備(一)

這幾天有空閒時間去網上找了找vue的相關的ui框架，看到有網友推薦quasar-framework，去它官網看了下，然後看到了Hybrid Mobile Apps (that look native,意思就是混合移動應用程式，這不就是混合app嗎，還是基於Vue的，仔細看了下支援的東西還

Framework7 + cordova +AS 混合開發安卓app（二）

四、cordova建立專案 建立專案 cordova create hello com.example.hello HelloWorld 如果一切正常，本條命令將建立一名為hello的專案資料夾，com.example.hello是你的專案包名，它將生成一個

Vue + quasar-framework進行Vue混合app開發 ─ 模擬器選擇及使用(四)

這裡推薦2鍾比較常用的模擬器，Genymotion和Android Studio自帶的Android Virtual Device，至於喜歡用哪個就用哪個。 Genymotion 需要準備下載的軟體 V

Vue + quasar-framework進行Vue混合app開發 ─ App真機除錯(三)

寫程式碼總避免不了會出錯需要除錯，Quasar混合開發的app除錯方法也很簡單，就和平時寫web端程式碼除錯一樣。 此處列幾種常用的除錯方法 真機除錯 真機除錯也就是用自己的手機進行除錯，完全真實環境。

Windows環境下搭建Ionic+cordova環境開發混合移動APP

網上有多篇ionic開發環境搭建的文章,但是針對windows下的說明比較少,所以在這裡再補充一篇windows下的開發環境搭建文章 1.nodejs nodejs官網: https://nodejs.org/en/ 它會自動檢測當前OS型別,並提供下載地址 Windows

HTML5 Plus移動App(5+App)開發入門指南

HTML5 Plus應用概述 HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以通過擴充套件的JS API任意呼叫手機的原生能力，實現與原生App同樣強大的功能和效能。 HTML5 Plus規範