ionic 安装

Ionic CLI 方式

Ionic 应用程序主要通过 Ionic 命令行实用程序创建和开发。Ionic CLI 是首选的安装方法，因为它在此过程中提供了广泛的开发工具和帮助选项。它也是运行应用程序并将其连接到其他服务（例如 Appflow）的主要工具。

使用 npm 安装 Ionic CLI：

npm install -g @ionic/cli

如果以前安装了 Ionic CLI，则需要卸载它，因为软件包名称发生了变化。

$ npm uninstall -g ionic
$ npm install -g @ionic/cli

查看ionic 版本：

$ ionic -v
7.0.1

CDN 方式

本站实例采用了ionic v7.0.1 版本，使用的 CDN 库地址：

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

Ionic + Angular

在 Angular 项目中使用 Ionic Framework 时，请从 npm 安装最新的 @ionic/angular 包。它附带了所有Ionic Framework组件和Angular特定的服务和功能。

npm install @ionic/angular@latest --save

要将 Ionic 添加到现有的 Angular 项目中，请使用 Angular CLI 的 ng add 功能。

ng add @ionic/angular

Ionic + React​

要将 Ionic Framework 添加到已经存在的 React 项目中，请安装 @ionic/react 和 @ionic/react-router 包。

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

CSS

要在 React 项目中包含必要的 CSS，请将以下内容添加到根 App 组件中。

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

Ionic + Vue

要将 Ionic Framework 添加到现有的 Vue 项目中，请安装 @ionic/vue 和 @ionic/vue-router 软件包。

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

之后，您需要在 Vue 应用程序中安装 IonicVue 插件。

main.js

import { IonicVue } from '@ionic/vue';

import App from './App.vue';
import router from './router';

const app = createApp(App).use(IonicVue).use(router);

router.isReady().then(() => {
  app.mount('#app');
});

请务必在 router.isReady（） 解析后挂载您的应用程序。

Routing​

在 Vue 应用中设置路由时，你需要从 @ionic/vue-router 而不是 vue-router 导入依赖项。

router/index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';

const routes = [
  // routes go here
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

CSS

要在 Vue 项目中包含必要的 CSS，请将以下内容添加到您的main.js。

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

Ionicons CDN​

默认情况下，Ionicon 与 Ionic Framework 一起打包，因此如果您使用的是 Ionic，则无需安装。要使用没有 Ionic Framework 的 Ionicon，请将以下内容放在页面末尾附近，就在结束标签之前</body>。

<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>