如何使用Ionic设置Svelte.js



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

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

2( 与npm install@ionic一起安装ionic/core@latest--保存。

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

Rollup正在提取@ionic css,但它的操作方式似乎有问题。离子成分是可以获得的,但我什么也看不见。css应用不正确。

有人设法让Svelte与Ionic v4一起工作吗?或者至少,爱奥尼亚配一些香草js?

这就是我最终让它很好地工作的原因

https://ionicsvelte.firebaseapp.com/

回购:

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

在REPL:

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

我做到了。使用CDN是最简单的。
  1. 构建一个新的应用程序:degit sveltejs/template myapp

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


<!-- 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>
  1. 更新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>
  1. 运行
yarn && yarn dev

相关内容

  • 没有找到相关文章

最新更新