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
网友评论