Ionic 套件
Ionic 提供不同的套件，可用於在測試環境、Angular、任何其他框架或完全沒有框架的情況下快速開始使用 Ionic Framework 或 Ionicons。
Ionic Framework CDN
Ionic Framework 可以從 CDN 包含，以便在 Plunker、Codepen 或任何其他線上程式碼編輯器中進行快速測試！
建議使用 jsdelivr 從 CDN 存取 Framework。若要取得最新版本，請將下列內容新增至 HTML 檔案中的 <head> 元素內，或線上程式碼編輯器中包含外部資產的位置。
<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 Framework 核心元件，而無需安裝框架。CSS 套件將包含所有 Ionic 全域樣式表。
這不會安裝 Angular 或任何其他框架。這允許在沒有框架的情況下使用 Ionic Framework 核心元件。
Ionic + Angular
在 Angular 專案中使用 Ionic Framework 時，請從 npm 安裝最新的 @ionic/angular 套件。這隨附所有 Ionic Framework 元件和 Angular 特有的服務與功能。
npm install @ionic/angular@latest --save
每次有新的 Ionic Framework 發行時，都需要更新此版本，以取得最新的功能和修正。該版本也可以使用 npm 更新。
若要將 Ionic 新增至現有的 Angular 專案，請使用 Angular CLI 的 ng add 功能。
ng add @ionic/angular
這會將必要的匯入項目新增至 @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() 解析後掛載您的應用程式。
路由
在 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';
從這裡，您可以從我們的Ionic Vue 快速入門指南中了解如何使用 Ionic Framework 進行開發。
Ionicons CDN
Ionicons 預設隨附在 Ionic Framework 中，因此如果您使用 Ionic，則不需要安裝。若要在不使用 Ionic Framework 的情況下使用 Ionicons，請將下列 <script> 放置在頁面結尾附近，緊接在結束的 </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>
請參閱Ionicons 使用方式，以取得有關使用 Ionicons 的詳細資訊。