Ionic 包
Ionic 提供不同的包，可用于快速开始在测试环境、Angular、任何其他框架或根本没有框架的情况下使用 Ionic 框架或 Ionicons。
Ionic 框架 CDN
Ionic 框架可以从 CDN 包含，以便在 Plunker、Codepen 或任何其他在线代码编辑器中进行快速测试！
建议使用 jsdelivr 从 CDN 访问框架。要获取最新版本，请在 HTML 文件中的
元素内或在在线代码编辑器中包含外部资产的位置添加以下内容这样就可以使用所有 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，请将以下
注意有关使用 Ionicons 的更多信息，请参阅 Ionicons 用法。