創建Vue項目并運行
一般Ionic項目創建可以使用ionic-cli命令，即：
ionic start [options]
然而查看該命令說明和源碼是沒有Vue的項目模版的（見STARTER_TEMPLATES中的projectType）。
所以使用Vue來創建項目：
npm install -g @vue/cli
vue create envt-iot-overall
這是Vue很基礎的東西，安裝依賴并運行看下：
cd envt-iot-overall
npm i
npm run serve
此時可以看到項目能正常運行的，一般來說，應用都需要和路由打交道，所以添加下路由：
vue add router
安裝Ionic依賴
對Ionic集成，安裝ionic相關依賴（其中@ionic/core是組件部分，@ionic/vue是封裝成Vue方式調用的接口部分）：
npm i @ionic/core @ionic/vue
安裝完成后，在main.js中添加配置：
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
再次運行，發現命令行會有告警提示：
warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'
同時頁面也會報錯，顯示空白頁面，這是一個BUG（前期的版本是沒有這個BUG的），我們需要安裝ionicons，而且它對版本有要求，要在V4.5.10以下，所以執行：
npm i ionicons@4.5.9-1 -D
此時再次運行，沒有告警也沒有錯誤提示，但是還是空白頁面，調試頁面發現有這樣一個樣式：
html:not(.hydrated) body {
display: none;
}
我也不知道這是干嘛用的，改了再說：
html:not(.hydrated) body {
display: block !important;
}
此時頁面看到有東西了，那我們嘗試下ionic的組件能不能用，在Home.vue頁面添加一個按鈕：
<ion-button color="primary">測試</ion-button>
可以看到組件渲染出來了，為了和ionic的dom結構保持一致，把App.vue稍微改動一下，變為如下：
<div id="app">
<router-view/>
</div>
注：本來想在
<router-view/>外面包上一層<ion-app></ion-app>標簽，以和Ionic的保持一致（Ionic每個頁面實際會渲染在<ion-app>里面），但考慮到Vue必須要有一個單根節點的特性，所以這里不包，而是把<ion-app>作為Vue每個頁面的根節點。
我們再試試看事件能不能響應，頁面稍微改一下：
<ion-button color="primary" @click="showLoading">測試</ion-button>
……
methods: {
async showLoading() {
const loading = await this.$ionic.loadingController.create({
spinner: 'hide',
duration: 2000,
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});
loading.present();
}
}
運行，發現能正常使用的。
改造路由
@ionic/vue將Vue Router與Ionic Router Outlet捆綁在一起，使Ionic組件可以直接訪問路由信息。作為回報，Ionic提供了令人賞心悅目的過渡效果。
為了支持Ionic的路由和使用其動畫和樣式，@ionic/vue里在vue-router的基礎上做了封裝，所以處理一下，打開router.js，修改一下（把Router替換為IonicVueRouter即可）：
import Vue from 'vue'
import Home from './views/Home.vue'
// import Router from 'vue-router'
import { IonicVueRouter } from '@ionic/vue'
Vue.use(IonicVueRouter)
export default new IonicVueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
此時看到路由也是正常使用的。
修改模式
眾所周知，Ionic默認是使用android/md（Material Design）模式的，如果想使用ios模式，在<html>上添加mode="ios"，即：
<html lang="en" mode="ios">
手機風格約束
index.html添加meta項：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
至此，基本項目配置就完成了，后續再談論更多細節。
補充：文章提到的BUG部分，在文章發表后一天內修復了（@ionic/vue^0.0.9）。
