Ionic 构建 Vue / React / Angular Web App

Ionic Framework一个开源的使用web技术（HTML , CSS , JS）UI库，用于构建高性能和高质量的移动和桌面应用程序

移动端开发框架ionic 最近发布version 4大版本，重写了UI组件库，可以让更多的前端框架集成使用，当前已支持 Vue , React , Angular。更让人兴奋的是，如果你不想使用任何框架，它同样支持使用CDN资源的形式，直接在项目中引用。下面我们就看看，它如何在Vue , React, Angular 中集成使用。

环境搭建

首先我们要安装Node.js 环境，然后使用node 的包管理工具全局安装Ionic CLI

$ npm install -g ionic

Vue

我们通过Vue CLI 创建一个的新的项目，然后将Ionic 集成进去。

$ npm install -g @vue/cli

$ vue create ionic-vue

select default options

$ cd ionic-vue

$ npm run serve (请在chrome中以移动端窗口打开）

通过以上的步骤可以打开如下的页面：

image

下一步我们将ionic / vue 安装到项目中

$ npm install @ionic/core @ionic/vue vue-router

然后我们将使用ionic 中提供的UI 组件重新构建 HelloWorld.vue。@ionic/vue 是作为Vue的一个插件，我们首先要在main.js 中注入它。

import Vue from 'vue';
import App from './App.vue';
import IonicVue from '@ionic/vue';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

Vue.config.productionTip = false;
Vue.use(IonicVue);
new Vue({
  render: h => h(App)
}).$mount('#app');

在这里我们做了：
1、首先将IonicVue已插件的形式注入到项目中
2、其次将Ionic 组件样式表注入进来
3、然后使用Vue.use(IonicVue)方法将IonicVue插件应用到项目中

Note: 这时在你的IDE编辑器中或者浏览器控制台里会提示unknown element, 这是因为ionic 组件是web 组件，所以你需要告诉vue,以ion前缀开头的组件不是Vue组件，需要在src/main.js中添加如下设置：

Vue.config.ignoredElements = [/^ion-/]

最后使用ionic 的UI 组件来重写编写HelloWorld.vue页面

<template>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Hello, Ionic!</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <img src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"/>
        <ion-card-header>
          <ion-card-subtitle>Isn't it great?</ion-card-subtitle>
          <ion-card-title>Look at this view!</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Although, it does look fairly cold.
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
</style>

这时你的界面像这样：

image.png

React

将ionic 集成进React 项目中其实和Vue 差别不大,这里我们采用Facebook提供的脚本create-react-app 创建React项目。

$ npm install create-react-app -g

$ create-react-app ionic-react

$ cd ionic-react

$ npm start (请在chrome中以移动端窗口打开）

$ npm install @ionic/react react-router react-router-dom

同样的，我们将ionic 集成进项目中，在使用组件的过程和Vue有一些差异。

在index.js中，我们需要将ionic 的css 样式注入进去

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

在App.js 中我们将使用的组件注入进去

import React, { Component } from 'react';

import {
  IonApp,
  IonHeader,
  IonToolbar,
  IonContent,
  IonTitle,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle,
  IonCardContent
} from '@ionic/react';

class App extends Component {
  render() {
    return (
      <IonApp>
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Hello, Ionic!</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonCard>
            <img src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
            <IonCardHeader>
              <IonCardSubtitle>Isn't it great?</IonCardSubtitle>
              <IonCardTitle>Look at this view!</IonCardTitle>
            </IonCardHeader>
            <IonCardContent>Although, it does look fairly cold.</IonCardContent>
          </IonCard>
        </IonContent>
      </IonApp>
    );
  }
}
export default App;

这时你的界面会和vue项目中出现相同的效果：

image.png

Angular

ionic 3及以前的版本，组件是采用Angular 作为内置JS框架，ionic 4同样支持使用ionic cli 一键创建项目。

$ ionic start ionic-angular blank --type=angular (如果不添加option的话，会默认创建ionic3 的项目)

don't install AppFlow at this stage

$ cd ionic-angular

$ ionic serve (请在chrome中以移动端窗口打开）

采用ionic cli创建的项目里，我们不需要注入@ionic/angular (默认注入),或者在页面中注入组件来构建页面

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Hello, Ionic!</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <img
      src="https://images.unsplash.com/photo-1552394459-917cbbffbc84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
    <ion-card-header>
      <ion-card-subtitle>Isn't it great?</ion-card-subtitle>
      <ion-card-title>Look at this view!</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Although, it does look fairly cold.
    </ion-card-content>
  </ion-card>
</ion-content>

同样你能看到如上两个项目中相同的页面。

image.png

总结

Ionic 作为一个流行的高性能移动端UI框架，它如何可以集成进Vue / React /Angular 前端框架，答案是就像它介绍的一样，它采用的是web standard 技术，即内置的组件都是web element。它是采用 stencil.js（ionic 团队开发的一个编译器），可以把你写的web component 编译成web element(即普通的html)，这样就可以在各个框架中共同使用，真正做到"write once, run everywhere"。

参考链接：https://dev.to/paulhalliday/ionic-4-angular-vue-js-and-react-1o14