目錄
一、基礎環境准備
二、構建VUE項目
三、配置Ionic界面框架
四、構建Cordova項目
五、整合Cordova、Vue、Ionic
一、基礎環境准備
1、下載 & 安裝vscode （強大的前后端開發工具）
2、下載 & 安裝nodejs （前端代碼打包編譯專用）
3、下載 & 安裝 git （強大的代碼托管工具）
4、打開vscode，安裝淘寶鏡像（推薦國內線路，安裝更加穩定，迅速）
npm i -g cnpm --registry=https://registry.npm.taobao.org
5、你需要知道的幾個官網
Ionic：https://ionicframework.com
Cordova：https://cordova.axuer.com/
6、你需要知道的npm常用指令說明
1. npm install
安裝node_module以及還原package.json內聲明的所有包
2. npm install xxxpackage
安裝xxx包到node_module目錄下，但是不會更新package.json文件，因此另外一個人拉取到代碼后無法使用npm install進行包還原，需要手動指定重裝
3. npm install --save xxxpackage
安裝xxx包到node_module目錄下，同時更新package.json的dependencies（生產/運行環境）配置，運行時如果需要就用這個
4. npm install --save-dev xxxpackage
安裝xxx包到node_module目錄下，同時更新package.json的devDependencies（開發/編譯環境），但是不會更新dependencies（生產/運行環境）配置，僅編譯時需要就用這個
5. npm install --global xxxpackage
安裝xxx包到全局，不同項目之間可以共享該包，就無需每個項目都安裝
6. 簡寫
install可以簡寫為i，例如：npm install 簡寫 npm i
--save可以簡寫為-S，例如：npm install --save xxxpackage 簡寫為 npm i -S xxxpackage
--save-dev可以簡寫為-D，例如：npm install --save-dev xxxpackage 簡寫為 npm i -D xxxpackage
--global可以簡寫為-g，例如：npm install --global xxxpackage 簡寫為 npm i -g xxxpackage
二、構建Vue項目
1. 安裝vue 腳手架（當前最火的MVVM前端架構，國人精心打造，推薦使用）
cnpm i -g vue-cli
2. 安裝webpack
cnpm i -g webpack
4. 創建webpack模板項目，一路回車以及按“Y”即可（假如無法使用vue指令，可能是因為沒有給系統執行腳本的權限，打開PowerShell，執行：set-ExecutionPolicy RemoteSigned 命令，再輸入Y回車即可）
vue init webpack drea.demo.app
5. 進入項目
cd drea.demo.app
6、完善.eslintrc.js文件中的規則（完善默認代碼規范，方便后續開發）
7、初始化依賴項
cnpm i
8、運行項目
npm run dev
9、效果如下
三、配置Ionic界面框架
1、安裝ionic需要的三個依賴包
cnpm i @ionic/vue @ionic/core ionicons@4.5.9-1 --save
2、修改src/main.js文件，新增如下代碼
import Ionic from '@ionic/vue' import '@ionic/core/css/ionic.bundle.css' Vue.use(Ionic)
3、修改src/components/HelloWorld.vue，代碼如下
<template>
<div>
<br />
<IonVuePage :title="'Alert'" style="text-algin:center;">
<ion-button @click="presentAlert">Show Alert</ion-button>
<ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
<ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
<ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
<ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
<ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
</IonVuePage>
</div>
</template>
<script>
export default {
methods: {
presentAlert() {
return this.$ionic.alertController
.create({
cssClass: "my-custom-class",
header: "Alert",
subHeader: "Subtitle",
message: "This is an alert message.",
buttons: ["OK"]
})
.then(a => a.present());
},
presentAlertMultipleButtons() {
return this.$ionic.alertController
.create({
cssClass: "my-custom-class",
header: "Alert",
subHeader: "Subtitle",
message: "This is an alert message.",
buttons: ["Cancel", "Open Modal", "Delete"]
})
.then(a => a.present());
},
presentAlertConfirm() {
return this.$ionic.alertController
.create({
cssClass: "my-custom-class",
header: "Confirm!",
message: "Message <strong>text</strong>!!!",
buttons: [
{
text: "Cancel",
role: "cancel",
cssClass: "secondary",
handler: blah => {
console.log("Confirm Cancel:", blah);
}
},
{
text: "Okay",
handler: () => {
console.log("Confirm Okay");
}
}
]
})
.then(a => a.present());
},
presentAlertPrompt() {
return this.$ionic.alertController
.create({
cssClass: "my-custom-class",
header: "Prompt!",
inputs: [
{
placeholder: "Placeholder 1"
},
{
name: "name2",
id: "name2-id",
value: "hello",
placeholder: "Placeholder 2"
},
{
name: "name3",
value: "http://ionicframework.com",
type: "url",
placeholder: "Favorite site ever"
},
// input date with min & max
{
name: "name4",
type: "date",
min: "2017-03-01",
max: "2018-01-12"
},
// input date without min nor max
{
name: "name5",
type: "date"
},
{
name: "name6",
type: "number",
min: -5,
max: 10
},
{
name: "name7",
type: "number"
},
{
name: "name8",
type: "password",
placeholder: "Advanced Attributes",
cssClass: "specialClass",
attributes: {
maxlength: 4,
inputmode: "decimal"
}
}
],
buttons: [
{
text: "Cancel",
role: "cancel",
cssClass: "secondary",
handler: () => {
console.log("Confirm Cancel");
}
},
{
text: "Ok",
handler: () => {
console.log("Confirm Ok");
}
}
]
})
.then(a => a.present());
},
presentAlertRadio() {
return this.$ionic.alertController
.create({
cssClass: "my-custom-class",
header: "Radio",
inputs: [
{
type: "radio",
label: "Radio 1",
value: "value1",
checked: true
},
{
type: "radio",
label: "Radio 2",
value: "value2"
},
{
type: "radio",
label: "Radio 3",
value: "value3"
},
{
type: "radio",
label: "Radio 4",
value: "value4"
},
{
type: "radio",
label: "Radio 5",
value: "value5"
},
{
type: "radio",
label: "Radio 6",
value: "value6"
}
],
buttons: [
{
text: "Cancel",
role: "cancel",
cssClass: "secondary",
handler: () => {
console.log("Confirm Cancel");
}
},
{
text: "Ok",
handler: () => {
console.log("Confirm Ok");
}
}
]
})
.then(a => a.present());
},
presentAlertCheckbox() {
return this.$ionic.alertController
.create({
cssClass: "my-custom-class",
header: "Checkbox",
inputs: [
{
type: "checkbox",
label: "Checkbox 1",
value: "value1",
checked: true
},
{
type: "checkbox",
label: "Checkbox 2",
value: "value2"
},
{
type: "checkbox",
label: "Checkbox 3",
value: "value3"
},
{
type: "checkbox",
label: "Checkbox 4",
value: "value4"
},
{
type: "checkbox",
label: "Checkbox 5",
value: "value5"
},
{
type: "checkbox",
label: "Checkbox 6",
value: "value6"
}
],
buttons: [
{
text: "Cancel",
role: "cancel",
cssClass: "secondary",
handler: () => {
console.log("Confirm Cancel");
}
},
{
text: "Ok",
handler: () => {
console.log("Confirm Ok");
}
}
]
})
.then(a => a.present());
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
4、再次運行項目，點擊按鈕，效果如下
四、構建Cordova項目
1、安裝cordova包（注意，這里一定要用npm，cnpm里的cordova有點問題）
npm i cordova -g
2、創建cordova項目
cordova create app drea.demo.app
3、進入cordova目錄
cd app
4、添加Browser平台核心套件（cordova platform ls 指令可以查看cordova支持的所有平台）
cordova platform add browser
5、以Browser平台運行，效果如圖
cordova run browser
6、添加Android平台核心套件
cordova platform add android
7、配置Android平台依賴環境（本人提供的下載地址：http://res.drea.cc/open/java/，不過最好去官網下載）
7.1 下載並配置 jdk（我用的1.8版本），環境變量如下（注意，環境變量配置值中的目錄要跟實際目錄保持一致）
配置項：JAVA_HOME 配置值：D:\MyApp\Study\Java\jdk 配置項：Path 配置值：%JAVA_HOME%\bin\ 配置項：Path 配置值：%JAVA_HOME%\jre\bin\
7.2 下載並配置android-sdk（我用的最新版本），環境變量如下
配置項：ANDROID_HOME 配置值：D:\MyApp\Study\Java\android-sdk 配置項：ANDROID_SDK_ROOT 配置值：D:\MyApp\Study\Java\android-sdk 配置項：Path 配置值：%ANDROID_HOME%\tools 配置項：Path 配置值：%ANDROID_HOME%\platform-tools
7.3 下載並配置apache-ant（我用的最新版本），環境變量如下
配置項：Path 配置值：D:\MyApp\Study\Java\apache-ant\bin
7.4 下載並配置gradle（我用的最新版本），環境變量如下
配置項：Path 配置值：D:\MyApp\Study\Java\gradle\bin
8、安裝Android SDK，具體安裝內容如圖所示
9、創建Android模擬器，如圖所示（也可以使用第三方模擬器，推薦：BlueStacks藍疊模擬器）
10、安裝虛擬化增強軟件，假如沒有安裝，啟動模擬器可能會報錯（Android SDK目錄下 extras\intel\Hardware_Accelerated_Execution_Manager）
11、查看當前Android依賴環境配置情況，假如一切正常，則效果如圖
cordova requirements android
12、以Android平台運行，效果如圖
假如報異常：Failed to install the following Android SDK packages as some licences have not been accepted platforms;android-28 Android SDK Platform 28，則表示你沒有安裝所需版本的SDK，比如這里表示我們需要安裝API 28 版本的SDK，那么我們就回到第8步繼續安裝
cordova run android
13、以Android平台進行打包，假如一切正常，則效果如圖
cordova requirements android
五、整合Vue、Ionic、Cordova
1、將cordova項目下www目錄中的js文件夾整個拷貝到vue項目下src目錄中
2、參考cordova項目下www目錄中的index.html文件來修改vue項目中的index.html文件，內容如下（這里假如不引用ionic js，會導致發布的android應用顯示異常，原因不明，猜測是ionic對vue項目的適配不是很好，如果有人知道原因，煩勞評論告知）
3、回到vue項目下
cd ..
4、在vue項目中安裝cordova-vue包
cnpm i vue-cordova --save
5、在main.js中新增如下配置
import vueCorvova from 'vue-cordova' Vue.use(vueCorvova)
6、修改vue項目的編譯輸出位置，如圖
7、編譯vue項目，將會生成編譯文件到cordova項目www目錄下
npm run build
8、重新進入cordova項目
cd app
9、以Browser平台運行，點擊按鈕，效果如圖
cordova run browser
10、已Android平台運行，點擊按鈕，效果如圖
cordova run android
