ionic学习（二）：Ionic4+Vue+Capacitor搭建项目

一、创建项目

1、使用Vue CLi搭建Vue项目

npm install -g @vue/cli
vue create ionic-vue-app
cd ionic-vue-app

创建成功之后通过命令启动项目：

npm run serve

具体创建方式及相关配置参照文章vue cli 3.x搭建项目
2、然后添加Ionic框架

npm install @ionic/vue

3、引用Ionic框架至项目中。打开src/main.js，配置如下代码：

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

Vue.use(Ionic);

4、修改src/router.js，配置代码如下：

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

Vue.use(IonicVueRouter);

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('./views/About.vue')
    }
  ]
})

5、然后使用Ionic组件，更改Home.vue代码如下（这里以Ionic的ion-action-sheet为例）：

最后就可以启动项目在web端进行查看。

二、将vue项目编译成Ionic项目

1、执行如下命令：

ionic init

终端效果如下：

? Project name: custom
[WARN] Could not determine project type.
Please choose a project type from the list.
? Project type: 
@ionic/angular (angular) 
Ionic 2/3 (ionic-angular) 
Ionic 1 (ionic1) 
❯ custom (custom) 

Project type 选择 custom (custom)
2、安装capacitor

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

执行如下命令初始化capacitor：

npx cap init

? App name ionic-app
? App Package ID (in Java package format, no dashes) com.ionicApp.VH
? Which npm client would you like to use? npm

3、需要 capacitor.config.json 里的 webDir，改为 dist。因为vue项目的构建目录为dist，这样我们就不用去复制代码到 www 目录（而且也没有创建 www 目录）。

"webDir": "dist"

4、构建项目

npm run build

三、IOS与Android运行项目

待开发测试，目前仍存在问题