00.stencil:01.stencilアプリのファイル構造

差分

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

この比較画面へのリンク

--- 00.stencil:01.stencilアプリのファイル構造 [2019/09/16] – [src/components/app-profile/app-profile.tsx] adash333
+++ 00.stencil:01.stencilアプリのファイル構造 [2019/09/16] (現在) – [リンク] adash333
@@ 行 1: / 行 1: @@
-====== 01.stencilアプリのファイル構造 =====
+====== 01.Stencil.jsアプリのファイル構造 =====
+ ---//2019/09/16 更新//
 前回の、[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]では、https://github.com/ionic-team/stencil-app-starter を[[https://relaxed-euclid-7d8e25.netlify.com/|Netlify]]で公開するところまで行いました。
@@ 行 13: / 行 14: @@
 DEMOサイト
 https://relaxed-euclid-7d8e25.netlify.com/
+===== stencil-app-starterのおおまかなファイル構造 =====
+https://github.com/adash333/stencil-starter-appのおおまかな構造は、以下のようになっています。（一部省略しています。）
+<code>
+.stencil/
+node_modules/
+src/
+www/
+.editorconfig
+.gitignore
+LICENCE
+package-lock.json
+package.json
+readme.md
+stencil.config.ts
+tsconfig.json
+</code>
+さらに、このうち、src/ フォルダの中身の主なものは以下のようになっています。
+<code>
+assets/
+components/
+|-app-home/
+  |-app-home.css
+  |-app-home.e2e.ts
+  |-app-home.spec.ts
+  |-app-home.tsx
+|-app-profile/
+  |-app-profile.css
+  |-app-profile.e2e.ts
+  |-app-profile.spec.ts
+  |-app-profile.tsx
+|-app-root/
+  |-app-root.css
+  |-app-root.e2e.ts
+  |-app-root.spec.ts
+  |-app-root.tsx
+global/
+components.d.ts
+index.html
+index.ts
+manifest.json
+</code>
 ===== package.json =====
@@ 行 40: / 行 88: @@
 ===== src/components/app-root/app-root.tsx =====
-src/index.htmlから読み込まれるapp-rootコンポーネントは、src/components/app-root/ フォルダにある、
+src/index.htmlから読み込まれる<wrap hi>app-rootコンポーネント</wrap>は、src/components/app-root/ フォルダにある、
   -app-root.tsx
   -app-root.css
@@ 行 67: / 行 115: @@
 ===== src/components/app-home/app-home.tsx =====
-src/components/app-root/app-root.tsx から、URLが"/"のときに読み込まれるapp-homeコンポーネントは、src/components/app-home/ フォルダにある、
+src/components/app-root/app-root.tsx から、URLが"/"のときに読み込まれる<wrap hi>app-homeコンポーネント</wrap>は、src/components/app-home/ フォルダにある、
   -app-home.tsx
   -app-home.css
@@ 行 117: / 行 165: @@
 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/　の、"@Prop and @State"の項が非常にわかりやすいです。
+公式ドキュメント
+https://stenciljs.com/docs/properties
+https://stenciljs.com/docs/state
 ===== @Event and @Listen =====
@@ 行 128: / 行 182: @@
 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/　の、"@Event and @Listen"の項がわかりやすいです。
+公式ドキュメント
+https://stenciljs.com/docs/events
@@ 行 149: / 行 203: @@
 前：[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]
-次：
+次：[[00.stencil:02.stencilでlocalStorage利用のTODOアプリ|00.stencil:02.stencilでlocalStorage利用のTODOアプリ]]

00.stencil/01.stencilアプリのファイル構造.1568604079.txt.gz · 最終更新: 2019/09/16 by adash333