Skip to main content

Ionic 包

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

¥Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all.

Ionic 框架 CDN​

¥Ionic Framework CDN

Ionic Framework 可以包含在 CDN 中，以便在 普朗克、代码笔 或任何其他在线代码编辑器中进行快速测试！

¥Ionic Framework can be included from a CDN for quick testing in a Plunker, Codepen, or any other online code editor!

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

¥It's recommended to use jsdelivr to access the Framework from a CDN. To get the latest version, add the following inside the <head> element in an HTML file, or where external assets are included in the online code editor:

<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 全局样式表。

¥With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic Global Stylesheets.

注意

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

¥This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework.

Ionic + Angular​

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

¥When using Ionic Framework in an Angular project, install the latest @ionic/angular package from npm. This comes with all of the Ionic Framework components and Angular specific services and features.

npm install @ionic/angular@latest --save

每次有新的 Ionic Framework 版本发布时，都需要更新此 version 以获得最新的功能和修复。版本也可以是 使用 npm 更新。

¥Each time there is a new Ionic Framework release, this version will need to be updated to get the latest features and fixes. The version can be updated using npm, as well.

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

¥For adding Ionic to an already existing Angular project, use the Angular CLI's ng add feature.

ng add @ionic/angular

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

¥This will add the necessary imports to the @ionic/angular package as well as add the styles needed.

Ionic + React​

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

¥To add Ionic Framework to an already existing React project, install the @ionic/react and @ionic/react-router package.

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

CSS​

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

¥To include the necessary CSS in a React project, add the following to the root App component.

/* 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 包。

¥To add Ionic Framework to an existing Vue project, install the @ionic/vue and @ionic/vue-router packages.

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

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

¥After that, you will need to install the IonicVue plugin in your Vue app.

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() 解决后安装你的应用。

¥Be sure to mount your app once router.isReady() has resolved.

路由​

¥Routing

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

¥When setting up routing in your Vue app, you will need to import your dependencies from @ionic/vue-router instead of 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 文件中。

¥To include the necessary CSS in a Vue project, add the following to your main.js file.

/* 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 进行开发。

¥From here, you can learn about how to develop with Ionic Framework in our Ionic Vue Quickstart Guide.

Ionic CDN​

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

¥Ionicons is packaged by default with the Ionic Framework, so no installation is necessary if you're using Ionic. To use Ionicons without Ionic Framework, place the following <script> near the end of your page, right before the closing </body> tag.

<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 的更多信息，请参阅 Ionic 图标的使用。

¥See Ionicons usage for more information on using Ionicons.

目录