使用Vue和ionic4开发移动应用

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

建立一个常规的vue应用

1
vue create vue-ionic4-basic

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

1
vue add router

系统显示:

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
? 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

  1. 接下来为应用加入ionic4支持,执行:
1
yarn add @ionic/vue @ionic/core

系统显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.
  1. 安装 ionicons
1
yarn add ionicons@4.5.9–1

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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.
  1. 修改 src/main.js 文件,引入 ionic。 修改后的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 行是新增的行。

  1. 修改 src/router.js 文件, 使用 IonicVueRouter 代替原来的 Router, 修改后的代码如下:
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
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 应用

  1. 设置 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

  1. 安装Capacitor

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

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

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

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

  1. 初始化 ionic, 执行:
1
ionic init

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

  1. 初始化Capacitor
    在项目目录中,运行命令:

    1
    npx cap init
  2. 增加Android的支持
    实际上这个过程是建立一个标准的android项目的过程

    1
    npx cap add android
  3. 运行Android项目
    在项目目录中运行open android命令,打开Android Studio运行示例程序。

    1
    npx cap open android

在Android Studio中运行项目

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

本文标题:使用Vue和ionic4开发移动应用

文章作者:梅老师

发布时间:2019年09月22日 - 08:09

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/vue/vue-with-ionic4/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。