小編給大家分享一下如何搭建Vue.js 2.0和Cordova開發webApp環境，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

儋州網站制作公司哪家好，找創新互聯！從網頁設計、網站建設、微信開發、APP開發、響應式網站等網站項目制作，到程序開發，運營維護。創新互聯成立與2013年到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯。

一、環境參數

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，就可以預覽項目。

以上是“如何搭建Vue.js 2.0和Cordova開發webApp環境”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

網站題目：如何搭建Vue.js2.0和Cordova開發webApp環境
當前URL：http://vcdvsql.cn/article40/podieo.html

成都網站建設公司_創新互聯，為您提供網站內鏈、網站導航、網頁設計公司、搜索引擎優化、外貿網站建設、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯