创建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）。
