Vue+Cordova+ionic项目开发

1、创建Vue项目

vue create demo

2、添加Cordova

vue add cordova

2.1 生成cordova工作目录

3、修改vue-cli打包位置

module.exports = {
  //输出文件目录
  outputDir: 'src-cordova/www',
  publicPath: '',
  pluginOptions: {
    cordovaPath: 'src-cordova'
  }
}

4、cordova添加平台

切换到cordova目录下

• cordova platform add android | iOS //添加android或者iOS平台
• cordova platform add ios@^5.1.1 //用指定版本打包

打开目录下对应的. xcworkspace文件

5、添加ionic

npm add @ionic/vue@0.0.9
npm add @ionic/core
npm add vue-router

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

Vue.config.productionTip = false;
Vue.use(Ionic);

Vue.config.ignoredElements = [/^Ion/, /^ion-/];

const router = new IonicVueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [{
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      name: "home",
      component: () =>
        import( /* webpackChunkName: "home" */ "@/components/HomePage"),
    },
    {
      path: "/about",
      name: "about",
      component: () =>
        import( /* webpackChunkName: "new-item" */ "@/components/About"),
    }
  ]
});

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

app图标和启动页

• https://blog.csdn.net/saucxs/article/details/94049682

附-图标icon制作

• http://icon.wuruihong.com/