ionic是一款混合移动应用开发框架，可以用来构建跨平台（Android & iOS）的移动应用程序，而且还可以基于Sass和AngularJS进行构建，是目前跨平台移动应用开发的一个翘楚。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
Vue.js是一个MVVM驱动的 web 界面的渐进式框架，学习简单并且十分灵活。ionic3之前一般默认和Angular“绑定”在了一起，从ionic4开始，Ionic Team宣布将会逐渐采用Stencil来实现标准Web Components，使用ionic将不再必须使用Angular，可以使用React，Vue，Jquery或者什么框架都不使用。

准备环境

Vue提供了CLI工具来方便的创建Vue应用，首先我们需要

  1. 安装Vue CLI： 
1
npm install -g vue-cli
  1. 创建vue项目
1
vue init webpack ionic-vue

随后一路enter

  1. 打开项目
1
2
3
cd ionic-vue
npm install
npm run dev

引入Ionic

  1. 在 index.html 引入 Ionic
1
2
3
4
<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">
<script src="https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js"></script>
  1. 在 src/main.js 中添加ignoredElements
1
2
3
4
5
6
7
8
9
Vue.config.ignoredElements = [
    'ion-app',
    'ion-header',
    'ion-navbar',
    'ion-title',
    'ion-content',
    'ion-button',
    ··· ···
];

开发应用

  1. 创建两个新页面

我们希望演示如何在两个页面之间跳转

例如 src/pages/HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <ion-app>
    <ion-header>
        <ion-navbar>
            <ion-title>Ionic</ion-title>
        </ion-navbar>
    </ion-header>
    <ion-content>
      <ion-button @click="goToDetail">Hello</ion-button>
    </ion-content>
  </ion-app>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    goToDetail () {
      this.$router.push('detail')
    }
  }
}
</script>

src/pages/Detail.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <ion-app>
    <ion-header>
        <ion-navbar>
            <ion-title>Ionic</ion-title>
        </ion-navbar>
    </ion-header>
    <ion-content padding>
        <p><router-link to="/">Go home</router-link></p>
    </ion-content>
  </ion-app>
</template>

<script>
export default {
  name: 'Detail',
  data () {
    return {
      msg: 'Welcome to Your Ionic App'
    }
  }
}
</script>

  1. 添加路由

router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/pages/HelloWorld'
import Detail from '@/pages/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: HelloWorld
    },
    {
      path: '/detail',
      component: Detail
    }
  ]
})

  1. 添加全局过渡动画效果

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div id="app">
    <transition name="slide-fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

打包成应用

  1. 添加cordova 到项目
1
npm install -g cordova
  1. 创建cordova项目
1
cordova create my-project-name
  1. 创建/移动vue项目
1
vue init webpack my-app

将my-app里的内容剪切到my-project-name下，同名覆盖

  1. 修改打包路径
    修改config/index.js文件下的build属性，将dist改为www，绝对路径改为相对路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
build: {
  index: path.resolve(__dirname, '../www/index.html'),

  assetsRoot: path.resolve(__dirname, '../www'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',

  productionSourceMap: true,

  devtool: '#source-map',

  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],

  bundleAnalyzerReport: process.env.npm_config_report
}

5.vue项目中添加cordova.js

在index.html body中添加cordova.js

1
<script type="text/javascript" src="cordova.js"></script>

同时在 head 中添加 移动端meta信息

1
2
3
4
<!--meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"-->
<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,email=no">
<meta name="msapplication-tap-highlight" content="no">
  1. 运行项目
1
2
npm install
npm run dev
  1. 编译成 iOS & Android 项目

安装 cordova iOS & Android 平台

1
cordova platform add ios android --save

编译

1
npm run build

运行

1
2
cordova run ios --device
cordova run android --device