Vue.js 2.0和Cordova開發webApp環境搭建方法

HTML5開發APP技術文檔

一、環境參數

1、技術語言：HTML、CSS、ES6、Node.js等；

2、框架：Vue.js 2.x、Cordova；

3、開發系統：mac、windows等；

4、環境配置： node 6+ npm 3+ （最好下載Node.js官方最新版本） 、jdk1.8、SDK（請直接下載Androidstudio軟件官方最新版本，已集成AndroidSDk，建議以默認路徑安裝） 。

二、系統環境變量配置（以window7為例）

1、AndroidSDK配置

A）添加用戶變量配置，如下圖所示：

變量名：ANDROID_HOME

變量值：以安裝的路徑為主，默認路徑為C:\Users\用戶名\AppData\Local\Android\sdk

B）在用戶變量PATH添加，如下圖所示：

;%ANDROID_HOME%\platform-tools;

C）在系統變量PATH添加，如下圖所示

默認路徑為C:\Users\用戶名\AppData\Local\Android\sdk\tools

D）說明：在cmd環境運行‘android'命令，如下圖所示，即表示環境變量配置成功。

2、JDK配置

A）添加系統變量，如下圖所示

變量名：JAVA_HOME

變量值：安裝JDK目錄

B）在系統變量PATH添加，如下圖所示：

;% JAVA_HOME%\ bin;

C ）添加系統變量，如下圖所示：
變量名：CLASSPATH

變量值：;.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

D）說明：在cmd環境運行‘javac'命令，如下圖所示，即表示環境變量配置成功。

三、Cordova +VUE 項目環境搭建

1、Cordova

A）安裝：npm install –g cordova

B）常用命令：

l 創建項目：cordova create 項目名；如下圖所示，即成功創建。

l 添加平臺：首先cmd進入創建的項目，然后執行cordova platform add android –save或cordovaplatform add ios –save，如下圖所示，即成功創建。

l 檢查平臺設置狀況：cordovaplatform ls ，如下圖所示，即成功創建。

l 創建APP：cordova build android或 cordova build ios，如下圖所示，即成功創建。

l 測試APP： cordova emulate android，如下圖所示，即成功創建。

2、集成VUE

A）安裝vue工具：npm install --g vue-cli

B）創建項目：首先cmd進入cordova創建的項目，然后執行vue init webpack，如下圖所示，即成功

C）npm install 安裝vue項目開發依賴包，如下圖所示，即成功。

3、項目相關說明

A）最終項目目錄：

B）修改項：

l 清空www文件夾里面的文件

l 找到config文件夾，修改index。Js

默認：

修改后：

l 開發好項目后，運行命令npm run build，接著運行cordova build android，最后cordovaemulate android，就可以預覽項目。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com