Vue+Ionic4，知虎偏行（二）创建及配置项目

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

最后编辑于：2019.08.26 10:15:40