Ionic4+Vue+Capacitor 初体验

cuieney 发布于2019-08-23 17:53 / 1793人阅读

摘要：最新的已经提供了其他框架的支持，，等等，甚至不使用框架。接下来我将使用和开发一个最简单的。也可以直接使用启动，运行使用模拟器运行项目完美，那么本次的初体验就到此结束了，的插件使用可以参考官方文档哦。

注：本文的目的在于记录自己基于最新的Ionic4构建一个App，也为同样需求的小伙伴提供参考。第一次写文章，文笔笨拙，还请见谅，不对之处，还请指出。

最新的Ionic4已经提供了其他 js 框架的支持，Vue，React 等等，甚至不使用框架。接下来我将使用 Vue 和 Ionic 开发一个最简单的app。

创建项目

使用Vue Cli创建一个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);

接下来修改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(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
})

现在，我们就可以访问Ionic的组件了，如下修改Home.vue的代码。

以 ion-action-sheet 为例，直接去官网复制示例代码：

完美~

那么如何把代码打包成为一个app呢，首先借助 ionic 开发的 capacitor，他是一个类似于 cordova 的可以提供本机接口的工具，同时它也兼容很多现有的 cordova 插件。我们回归到代码(以下仅演示Android环境)：

首先，我们需要把我们的 vue 项目变成一个 ionic 项目:

ionic init

注意：Project type 选择 custom (custom)

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

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

然后初始化 capacitor，App name 和 App Package ID 根据你自己的项目去进行填写

npx cap init

初始化之后我们需要改一下 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

使用模拟器运行项目

完美~，那么本次的初体验就到此结束了，capacitor 的插件使用可以参考官方文档哦。

运行环境：

浏览器：Chrome

编辑器：VS Code

软件版本：

"dependencies": {
    "@capacitor/android": "^1.0.0",
    "@capacitor/cli": "^1.0.0",
    "@capacitor/core": "^1.0.0",
    "@ionic/vue": "0.0.4",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3"
  },

参考资料：

Ionic文档

Capacitor文档

Ionic宣布vue测试版

idc机房托管超融合服务器初体验 Capacitor ionic4 初长成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104312.html

Capacitor 新一代混合应用“神器” 会代替Cordova吗？？

摘要：介绍畅想是由团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在，，和上本机运行的应用程序。后者旨在替代或者说是进化。希望看到在未来发展，以及正式发布。我认为它有可能大大改善混合应用开发体验。 1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在iOS，Android，Electron和Web上本机运行的Web应用程序。我们...

番茄西红柿 2019-04-23 13:14 评论0 收藏0
ionic4+vue+cordova开发混合应用

摘要：摘要是可以让我们使用开发即使来移动应用的框架。如果你熟悉可以直接使用开发，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以来说明这两者如何结合使用。除此之外还引入和来对把我们代码打包成安卓或应用。。摘要 ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽离成四个版本，@ionic/co...

Yujiaao 2019-08-23 17:00 评论0 收藏0
Vue上手初体验

摘要：已经建立了和数据之间的连接，此时任何对的改动，都会触发的更新。是一个双向绑定，意味着当在当前上所对应的数据发生改变时，更新的值当用户在中修改或输入内容的时候，同步上对应的数据。 Vue.js vue.js不是一个框架，他只是一个提供MVVM风格的双向绑定的库，专注于UI层面。在 Vue.js 的定义中，View 就是用户实际看到的 DOM 元素，而 Model 就是原生的JavaSc...

Eirunye 2019-08-21 11:19 评论0 收藏0
Vue上手初体验

摘要：已经建立了和数据之间的连接，此时任何对的改动，都会触发的更新。是一个双向绑定，意味着当在当前上所对应的数据发生改变时，更新的值当用户在中修改或输入内容的时候，同步上对应的数据。 Vue.js vue.js不是一个框架，他只是一个提供MVVM风格的双向绑定的库，专注于UI层面。在 Vue.js 的定义中，View 就是用户实际看到的 DOM 元素，而 Model 就是原生的JavaSc...

kgbook 2019-08-05 10:32 评论0 收藏0
Vue+Express+Mysql 全栈初体验

前言原文地址曾几何时，你有没有想过一个前端工程师的未来是什么样的？这个时候你是不是会想到了一个词前端架构师，那么一个合格的前端架构只会前端OK吗？那当然不行，你必须具备全栈的能力，这样才能扩大个人的形象力，才能升职加薪，才能迎娶白富美，才能走向人生巅峰... 最近我在写一些后端的项目，发现重复工作太多，尤其是框架部分，然后这就抽空整理了前后端的架子，主要是用的Vue，Express，数据存储用...

econi 2019-08-26 13:55 评论0 收藏0