使用Vue和ionic4开发移动应用

本文演示使用 vue-cli3 和 ionic 4 构建Android应用程序。

建立一个常规的vue应用

1	vue create vue-ionic4-basic

建立好以后，进入项目目录，为项目加入路由支持，执行:

1	vue add router

系统显示:

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes



🚀  Invoking generator for core:router...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 8.50s.
✔  Successfully invoked generator for plugin: core:router
   The following files have been updated / added:

     src/router.js
     src/views/About.vue
     src/views/Home.vue
     package.json
     src/App.vue
     src/main.js
     yarn.lock

   You should review these changes with git diff and commit them.

加入 ionic4

接下来为应用加入ionic4支持，执行:

1	yarn add @ionic/vue @ionic/core

系统显示:

yarn add v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
├─ @ionic/core@4.9.1
└─ @ionic/vue@0.0.4
info All dependencies
├─ @ionic/core@4.9.1
└─ @ionic/vue@0.0.4
✨  Done in 16.09s.

安装 ionicons

1	yarn add ionicons@4.5.9–1

系统会提示你选择版本，选择 4.5.9-1 版。

yarn add v1.13.0
[1/4] 🔍  Resolving packages...
Couldn't find any versions for "ionicons" that matches "4.5.9–1"
? Please choose a version of "ionicons" from this list: 4.5.9-1
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ ionicons@4.5.9-1
info All dependencies
└─ ionicons@4.5.9-1
✨  Done in 29.25s.

修改 src/main.js 文件，引入 ionic。修改后的代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

其中第5， 6， 8 行是新增的行。

修改 src/router.js 文件, 使用 IonicVueRouter 代替原来的 Router, 修改后的代码如下:

import Vue from 'vue'
// import Router from 'vue-router'
import Home from './views/Home.vue'
import { IonicVueRouter } from '@ionic/vue';

// Vue.use(Router)
Vue.use(IonicVueRouter);

// export default new Router({
export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  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 命令行工具

确保你已经安装了node, 执行以下命令安装Ionic CLI

1	npm install -g ionic

你也可以使用yarn来进行安装，执行:

1	yarn global add ionic

安装完成后，执行以下命令验证安装结果

1	ionic --version

如果安装正常，你应该可以看到系统显示版本号。

发布为 Android 应用

设置 Android SDK

安装 Android SDK, 然后设置相关环境变量

1) 设置Android_SDK_ROOT
MacOS

1	export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

2) 设置相关工具路径
MacOS

1
2
3

export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator

安装Capacitor

进入示例项目目录，然后执行命令安装capacitor执行

1 2	cd todo-ionic-app yarn add @capacitor/core @capacitor/cli

如果你使用的是npm, 则可以执行

1	npm install --save @capacitor/core @capacitor/cli

初始化 ionic, 执行:

1	ionic init

按提示输入项目名称即可，案例中是: vue-ionic4-basic

初始化Capacitor
在项目目录中，运行命令:
1
npx cap init
增加Android的支持
实际上这个过程是建立一个标准的android项目的过程
1
npx cap add android
运行Android项目
在项目目录中运行open android命令，打开Android Studio运行示例程序。
1
npx cap open android

在Android Studio中运行项目

保持Web项目和本地项目的同步
执行
1
ionic capacitor copy android