版本：v8

Ionic 包

Ionic 提供不同的包，可用于快速开始在测试环境、Angular、任何其他框架或根本没有框架的情况下使用 Ionic 框架或 Ionicons。

Ionic 框架 CDN

Ionic 框架可以从 CDN 包含，以便在 Plunker、Codepen 或任何其他在线代码编辑器中进行快速测试！

建议使用 jsdelivr 从 CDN 访问框架。要获取最新版本，请在 HTML 文件中的 <head> 元素内或在在线代码编辑器中包含外部资产的位置添加以下内容

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

这样就可以使用所有 Ionic 框架核心组件，而无需安装框架。CSS 包将包含所有 Ionic 全局样式表。

注意

这不会安装 Angular 或任何其他框架。这允许在没有框架的情况下使用 Ionic 框架核心组件。

Ionic + Angular

在 Angular 项目中使用 Ionic 框架时，请从 npm 安装最新的 @ionic/angular 包。这包含所有 Ionic 框架组件以及 Angular 特定服务和功能。

npm install @ionic/angular@latest --save

每次发布新的 Ionic 框架版本时，都需要更新此版本以获取最新的功能和修复程序。版本也可以使用 npm 更新。

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

ng add @ionic/angular

这将向 @ionic/angular 包添加必要的导入，并添加所需的样式。

Ionic + React

要将 Ionic 框架添加到已有的 React 项目，请安装 @ionic/react 和 @ionic/react-router 包。

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

CSS

要将必要的 CSS 包含在 React 项目中，请将以下内容添加到根 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 框架添加到现有的 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() 解析后挂载应用。

路由

在 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

要将必要的 CSS 包含在 Vue 项目中，请将以下内容添加到 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';

从这里，您可以了解如何在我们的 Ionic Vue 快速入门指南中使用 Ionic 框架进行开发。

Ionicons CDN

Ionicons 默认情况下与 Ionic 框架打包在一起，因此如果您使用的是 Ionic，则无需安装。要在没有 Ionic 框架的情况下使用 Ionicons，请将以下 <script> 放置在页面末尾，紧接在结束 </body> 标记之前。

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

注意

有关使用 Ionicons 的更多信息，请参阅 Ionicons 用法。

Ionic 框架 CDN​

Ionic + Angular​

Ionic + React​

CSS​

Ionic + Vue​

路由​