Question

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

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

2）通过npm install @ ionic / core @ latest --save安装了ionic。

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

Rollup正在提取@ionic CSS，但似乎操作方式可能有问题。离子成分是必需的，但我看不到任何东西。 css应用不正确。

有人能使Svelte与Ionic v4兼容吗？或者至少是Ionic和一些普通的js？

Answer 1

我做到了。使用 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

Answer 2

这就是我最终使它运行得很好的方式

https://ionicsvelte.firebaseapp.com/

回购：

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

在REPL中：

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

如何使用Ionic设置Svelte.js？

2 个答案: