vue+ionic

vue的环境搭建：

npm install -g @vue/cli （若已搭建跳过）
vue create ionic-vue-app

cd ionic-vue-app

npm run serve

成功了，接下来我们为项目添加 Vue Router 和 Ionic 框架。

vue add router
npm install @ionic/vue

安装完成后，还需要引入到我们的项目中，这样就可以使用 Ionic 的组件了。
首先打开 src/main.js, 添加下面三行代码：

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

Vue.use(Ionic);

改造路由，router/index.js

import Vue from 'vue'

import HelloWorld from '@/components/HelloWorld'

//import Router from 'vue-router'

/*
Vue.use(Router)

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

import { IonicVueRouter } from '@ionic/vue';
Vue.use(IonicVueRouter)

export default new IonicVueRouter({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
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" */ '../components/HelloWorld.vue')
component:HelloWorld
}
]
})

若运行出现：
"export 'ICON_PATHS' was not found in 'ionicons/icons'
时页面也会报错，显示空白页面，这是一个BUG（前期的版本是没有这个BUG的），我们需要安装ionicons，而且它对版本有要求，要在V4.5.10以下，所以执行：
npm i ionicons@4.5.9-1 -D

若报错：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
安装：
npm install webpack-dev-server --save-dev
再次运行 npm run dev即可

要把我们的 vue 项目变成一个 ionic 项目:
ionic init

注意：Project type 选择 custom (custom)
project：myivapp-app

然后我们在该项目中安装capacitor:

npm install --save @capacitor/core @capacitor/cli
然后初始化 capacitor，App name 和 App Package ID 根据你自己的项目去进行填写
npx cap init
appname： myivapp-appname
App Package ID：myivapp.com

初始化之后我们需要改一下 capacitor.config.json 里的 webDir，改成 dist，因为vue项目的构建目录为dist，这样可以省的我们去复制代码到 www 目录（并且我们也没有创建 www 目录）。

"webDir": "dist"
接下来我们构建项目：
npm run build

然后我们使用 capacitor 添加对Android平台的支持，并将构建的代码拷贝到Android项目库里：

npx cap add android
npx cap copy android
现在我们就可以使用Android Studio打开项目，使用模拟器运行项目，或是构建app。
也可以直接使用 capacitor启动Android Studio，运行：

npx cap open android

问题：
禁止eslint
在package.json
删除eslintConfig 配置
"eslintConfig": {
"root": false, //禁止eslint
"env": {
"node": false //禁止 eslint
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},

关闭eslint
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
//关闭 规则
"semi": ["off"],
"quotes": ["off"]

},
"parserOptions": {
  "parser": "babel-eslint"
}

}
https://juejin.im/entry/57e8d64ca0bb9f005850446c

问题：
1 提示找不到cli-service相关时，先cnpm install
再 cnpm install -g @vue/cli

2 有时提示找不到axios和vue-axios， 进行 安装 npm install --save axios vue-axios
运行npm install --save axios vue-axios 会失败，此时需要分两步运行：
cnpm install axios
cnpm install --save axios vue-axios

注意：尽量用cnpm ，有时npm会中途下载原因导致安装失败