0、安裝nodejs

一、安裝vue-cli

1、使用npm全域性安裝vue-cli（前提是你已經安裝了nodejs，否則你連npm都用不了），在cmd中輸入一下命令

npm install --global vue-cli

2、建立自己的工作空間，在cmd切換至剛剛建立好的工作空間，如果已經有工作空間，直接切換到工作空間即可。使用命令建立一個叫做vuetest的專案

vue init webpack vuetest

命令輸入後，會進入安裝階段，需要使用者輸入一些資訊

Project name (vuetest) 專案名稱，可以自己指定，也可直接回車，按照括號中預設名字（注意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師部落格為什麼檔名要小寫 ，可以參考一下。

Project description (A Vue.js project) 專案描述，也可直接點選回車，使用預設名字

Author (……..) 作者，不用說了，你想輸什麼就輸什麼吧

接下來會讓使用者選擇

Runtime + Compiler: recommended for most users 執行加編譯，既然已經說了推薦，就選它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅執行時，已經有推薦了就選擇第一個了

Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，不過我的第一個專案中的路由是自己寫的，沒有使用到官方路由，因為有特殊需求，也因為比較早，官方尚未成熟，vue-router官網 。這裡就輸入“y”後回車即可。

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理程式碼，ESLint是個程式碼風格管理工具，是用來統一程式碼風格的，並不會影響整體的執行，這也是為了多人協作，新手就不用了，一般專案中都會使用。ESLint官網

接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue專案時的程式碼風格，因為我選擇了使用ESLint

Standard (https://github.com/feross/standard) 標準，有些看不明白，什麼標準呢，去給提示的standardgithub地址看一下， 原來時js的標準風格

AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

none (configure it yourself) 這個不用說，自己定義風格

具體選擇哪個因人而異吧 ，我選擇標準風格

Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝

Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝
完成

3、目錄結構，

bulid 裡面是一些操作檔案，使用npm run * 時其實執行的就是這裡的檔案

config 配置檔案，執行檔案需要的配置資訊

src 資原始檔，所有的元件以及所用的圖片都是在這個放著的簡單看一下這個資料夾下都放了那些東西

src目錄

• assets 資原始檔夾，放圖片之類的資源
• components 元件資料夾，寫的所有元件都放在這個資料夾下，現在有一個寫好的元件已經放到裡面了
• router 路由資料夾，這個決定了也面的跳轉規則
• App.vue應用元件，所有自己寫的元件，都是在這個元件之上運行了，
• main.js webpack入口檔案，webpack四大特性entry入口、output輸出，loader載入器，plugins外掛，可以再專案中build\webpack.base.conf.js第12行看到這個入口檔案是哪個。

4、安裝模組

cd vuetest

安裝一來模組

npm install

這裡只用了install是安裝所有的模組，如果是安裝具體的那個模組install 後面輸入模組的名字即可，只輸入install就按照專案的根目錄下的package.json檔案中依賴的模組安裝，這個檔案裡面是不允許有任何註釋的，每個使用npm管理的專案都有這個檔案，是npm操作的入口檔案。因為是初始專案，還沒有任何模組，需要安裝所有的模組，這就是為什麼我們剛下載下來別人的專案時都需要先執行 npm install 命令，因為模組較多，檔案比較大，所以沒有上傳模組，這個不需要上傳那些檔案的配置是在根目錄下.gitignore配置的，這是git操作的配置檔案，涉及到的git操作都要操作這個檔案，可以沒有，也可以什麼都不寫。這個安裝時間比較長，再加上npm是國外的伺服器，就更慢了，也可以再開始之前就講npm切換到taobao映象上，就相對會快一些，這裡可以看一下阮一峰老師的npm 模組安裝機制簡介

安裝完成後，目錄中會多出來一個node_modules資料夾，這裡放的就是所有依賴的模組，如何將npm切換至cnpm

5、執行專案

npm run dev

6、打包專案，打包完成後，會在根目錄下生成一個dist資料夾，這就是最後的成品頁面（一會使用cordova把這裡的網頁編譯成APP）

npm run build

二、安裝和編譯cordova

1、安裝

npm install -g cordova

安裝完成後可以使用cordova -v或者cordova -version驗證一下是否安裝成功

我們這樣安裝的cordova是最新版本的，如需安裝其它版本，只需要在命令列npm install -g cordova後面加上“@版本號”就可以了。
例如安裝5.4.1的版本：npm install -g [email protected]

因為cordova安裝的版本是與android sdk版本有關的，我安裝的是cordova 6.0.0，所有必須使用sdk版本android-23。如果你的sdk版本過低，可以考慮安裝低一點版本的cordova。注意：這一定是相對應的！

這裡也講一下cordova的解除安裝命令，如果你不想用cordova或者是cordova安裝錯誤可在cmd命令列視窗執行命令：npm uninstall cordova -g即可解除安裝cordova

1.1 gradle安裝
cordova4.0.0以後,Android工程通過Gradle生成，安裝後將bin新增到系統path中

2、建立專案，建立一個名字為cordovacheck的專案，包名是com.example.test

cordova create cordovacheck com.example.test

切換到專案cordovacheck資料夾下

3、新增平臺，以Android平臺為例，命令為：

cordova platform add android

當然除了android平臺，你也可以新增其他的平臺：

cordova platform add wp8 
cordova platform add windows 
cordova platform add amazon-fireos 
cordova platform add android 
cordova platform add blackberry10 
cordova platform add firefoxos

解除安裝平臺命令：

cordova platform rm ios 
cordova platform rm firefoxos 
cordova platform rm windows 
cordova platform rm wp8 
cordova platform rm firefoxos 
cordova platform rm android 

檢視自己已經安裝的平臺以及未安裝的平臺：

cordova platforms ls 

3、新增外掛（視專案需求情況）例如：新增cordova-plugin-camera外掛這裡寫程式碼片：

cordova plugin add cordova-plugin-camera

4、編譯打包

將你寫的一些html、css、js檔案放到你建的專案（cordovacheck）目錄下的www檔案下對應的位置：

然後在命令列下輸入以下命令：

cordova build android

然後就是靜靜的等待編譯。。。

這代表打包成功了，然後在 專案\platforms\android\build\outputs 資料夾下找到apk安裝檔案，

在手機上測試執行即可。