如何使用 Ionic 设置 Svelte.js？

Posted 2023-02-19

【中文标题】如何使用 Ionic 设置 Svelte.js？

【英文标题】：How to setup Svelte.js with Ionic?

【发布时间】：2020-02-24 22:42:09

【问题描述】：

我正在尝试使用 Svelte.js 和 Ionic v4 构建一个移动应用程序。

1) 我得到了苗条的模板。

2) 使用 npm install @ionic/core@latest --save 安装 ionic。

3) 安装 postcss 并在 global.css 中导入 @ionic css

Rollup 正在提取 @ionic css，但它的执行方式似乎有问题。离子成分是可访问的，但我什么也看不见。没有正确应用 css。

有没有人设法让 Svelte 与 Ionic v4 一起工作？或者至少，Ionic 和一些香草 js？

【参考方案1】：

这就是我最终让它很好地工作的方式

https://ionicsvelte.firebaseapp.com/

回购：

https://github.com/Tommertom/svelte-ionic-app

在 REPL 中：

https://github.com/Tommertom/svelte-ionic-app/blob/master/REPLS.md

【讨论】：

我相信关于 SO 的答案应该是独立的，而不仅仅是链接列表。您能否至少总结一下集成的工作原理？该演示似乎不再起作用。 REPL 很有帮助，谢谢。

，离子资产位于资产文件夹中。没有设法让 web 组件以其他方式集成。该 API 易于使用 import MenuI, loadingController, toastController, alertController, pickerController, actionSheetController, modalController, popoverController from "@ionic/core";查看 repo 的 rollup.config.js、IonicControllers.ts 等。

【参考方案2】：

我做到了。使用 CDN 是最简单的。

搭建一个新应用： degit sveltejs/template myapp

将CDN添加到./global.css上方的public/index.html

<!-- ionic -->
<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"/>

<!-- ionicons -->
<script type="module" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js"></script>

更新 App.svelte

<script>
const greet = () => alert('hi')
</script>

<ion-app>
  <ion-content>
    <ion-header>
      <ion-toolbar>
        <ion-title>My App</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-content>
  <ion-footer>
    <ion-button color="secondary" expand="block" on:click=greet>
      Greet
    </ion-button>
  </ion-footer>
</ion-app>

运行

yarn && yarn dev