stencil:01.stenciloneでアプリ作成

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- stencil:01.stenciloneでアプリ作成 [2019/06/08] – 作成 adash333
+++ stencil:01.stenciloneでアプリ作成 [2019/06/08] (現在) – [ソースコードとDEMOサイト] adash333
@@ 行 2: / 行 2: @@
 年6月にStencilのVersion1.0が公開されました。
+https://stenciljs.com/
+{{:stencil:pasted:20190608-123827.png}}
+それまでと異なり、StencilOneと、"One"という名前が追加され、ロゴも変わっています。
+before: {{:stencil:pasted:20190608-124010.png?50|}} Stencil
+after: {{:stencil:pasted:20190608-124039.png}}
+とりあえず、StencilOneのデフォルトアプリを作成して、Netlifyにデプロイしてみたいと思います。
+===== 開発環境 =====
+<code>
+Panasonic CF-RZ6
+Windows 10 Pro (1803)
+VisualStudioCode 1.35.0
+git version 2.20.1.windows.1
+nvm 1.1.7
+node 10.2.0
+npm 6.4.1
+</code>
+===== 新規StencilOneアプリの作成 =====
+C:/　フォルダに stencil/ フォルダを作成し、C:/stencil/ フォルダをVisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力します。
+<code>
+npm init stencil
+</code>
+{{:stencil:pasted:20190608-125535.png}}
+  -ionic-pwa を選択したままEnter
+  -project nameは、stencilone-ionic-pwa
+けっこうさくっとStencilアプリが作成されました。Ionic4-Angularと全然違う！
+{{:stencil:pasted:20190608-125726.png}}
+引き続き以下を入力します。
+<code>
+cd stencilone-ionic-pwa
+npm start
+</code>
+{{:stencil:pasted:20190608-132010.png}}
+ブラウザに右上のような画面が表示されるのに約20秒くらいかかりました。
+Ionic4-Angularよりはだいぶ軽そうです。（当たり前っちゃ当たり前ですが。）
+Ctrl+C => y + Enter でサーバを止めます。
+===== GitHubにpushする =====
+https://github.com/ にログインして、新規リポジトリを作成し、pushします。
+今回は、stencilone-ionic-pwa という名前にしました。
+<code>
+git init
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/stencilone-ionic-pwa.git
+git push -u origin master
+</code>
+{{:stencil:pasted:20190608-132509.png}}
+https://github.com/adash333/stencilone-ionic-pwa
+===== Netlifyにデプロイ =====
+https://www.netlify.com/ へログインし、New Site from Git をクリックし、上のリポジトリをデプロイします。
+設定は以下のようにします。
+{{:stencil:pasted:20190608-141907.png}}
+{{:stencil:pasted:20190608-142840.png}}
+デプロイできたようです。
+https://blissful-thompson-334371.netlify.com/
+{{:stencil:pasted:20190608-143401.png}}
+{{:stencil:pasted:20190608-143416.png}}
+===== ソースコードとDEMOサイト =====
+ソースコード
+https://github.com/adash333/stencilone-ionic-pwa
+DEMOサイト
+https://blissful-thompson-334371.netlify.com/
+===== 参考リンク =====
+https://github.com/ionic-team/stencil-app-starter
+===== リンク =====
+目次：[[stencil:index.html|Stencil.js]]

stencil/01.stenciloneでアプリ作成.1559997418.txt.gz · 最終更新: 2019/06/08 by adash333