サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.stencil:01.stencilアプリのファイル構造 [2019/09/16]
adash333 [stencil-app-starterのおおまかなファイル構造]
00.stencil:01.stencilアプリのファイル構造 [2019/09/16] (現在)
adash333 [リンク]
行 1: 行 1:
-====== 01.stencilアプリのファイル構造 =====+====== 01.Stencil.jsアプリのファイル構造 =====
  ---//2019/09/16 更新//  ---//2019/09/16 更新//
 前回の、[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]では、https://github.com/ionic-team/stencil-app-starter を[[https://relaxed-euclid-7d8e25.netlify.com/|Netlify]]で公開するところまで行いました。 前回の、[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]では、https://github.com/ionic-team/stencil-app-starter を[[https://relaxed-euclid-7d8e25.netlify.com/|Netlify]]で公開するところまで行いました。
行 16: 行 16:
  
 ===== stencil-app-starterのおおまかなファイル構造 ===== ===== stencil-app-starterのおおまかなファイル構造 =====
-https://github.com/adash333/stencil-starter-appのおおまかな構造は、以下のようになっています。+https://github.com/adash333/stencil-starter-appのおおまかな構造は、以下のようになっています。(一部省略しています。)
  
 <code> <code>
行 39: 行 39:
 components/ components/
 |-app-home/ |-app-home/
-  |-app-home.+  |-app-home.css 
 +  |-app-home.e2e.ts 
 +  |-app-home.spec.ts 
 +  |-app-home.tsx
 |-app-profile/ |-app-profile/
 +  |-app-profile.css
 +  |-app-profile.e2e.ts
 +  |-app-profile.spec.ts
 +  |-app-profile.tsx
 |-app-root/ |-app-root/
   |-app-root.css   |-app-root.css
行 81: 行 88:
 ===== src/components/app-root/app-root.tsx ===== ===== 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.tsx
   -app-root.css   -app-root.css
行 108: 行 115:
 ===== src/components/app-home/app-home.tsx ===== ===== 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.tsx
   -app-home.css   -app-home.css
行 158: 行 165:
  
 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/ の、"@Prop and @State"の項が非常にわかりやすいです。 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 ===== ===== @Event and @Listen =====
行 169: 行 182:
 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/ の、"@Event and @Listen"の項がわかりやすいです。 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/ の、"@Event and @Listen"の項がわかりやすいです。
  
- +公式ドキュメント 
 +https://stenciljs.com/docs/events
  
  
行 190: 行 203:
 前:[[00.stencil:index.html|Webコンポーネント作成ツールStencil]] 前:[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]
  
-次:+次:[[00.stencil:02.stencilでlocalStorage利用のTODOアプリ|00.stencil:02.stencilでlocalStorage利用のTODOアプリ]]


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