このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
00.stencil:01.stencilアプリのファイル構造 [2019/09/16] adash333 [src/components/app-profile/app-profile.tsx] |
00.stencil:01.stencilアプリのファイル構造 [2019/09/16] (現在) adash333 [リンク] |
||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 01.stencilアプリのファイル構造 ===== | + | ====== 01.Stencil.jsアプリのファイル構造 ===== |
+ | | ||
前回の、[[00.stencil: | 前回の、[[00.stencil: | ||
行 13: | 行 14: | ||
DEMOサイト | DEMOサイト | ||
https:// | https:// | ||
+ | |||
+ | ===== stencil-app-starterのおおまかなファイル構造 ===== | ||
+ | https:// | ||
+ | |||
+ | < | ||
+ | .stencil/ | ||
+ | node_modules/ | ||
+ | src/ | ||
+ | www/ | ||
+ | .editorconfig | ||
+ | .gitignore | ||
+ | LICENCE | ||
+ | package-lock.json | ||
+ | package.json | ||
+ | readme.md | ||
+ | stencil.config.ts | ||
+ | tsconfig.json | ||
+ | </ | ||
+ | |||
+ | さらに、このうち、src/ | ||
+ | |||
+ | < | ||
+ | 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 | ||
+ | </ | ||
+ | |||
+ | |||
===== package.json ===== | ===== package.json ===== | ||
行 40: | 行 88: | ||
===== src/ | ===== src/ | ||
- | src/ | + | src/ |
-app-root.tsx | -app-root.tsx | ||
-app-root.css | -app-root.css | ||
行 67: | 行 115: | ||
===== src/ | ===== src/ | ||
- | src/ | + | src/ |
-app-home.tsx | -app-home.tsx | ||
-app-home.css | -app-home.css | ||
行 107: | 行 155: | ||
{{: | {{: | ||
+ | <wrap hi> | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | ===== @Propと@State ===== | ||
+ | @Propは、コンポーネントに何かを入力するときに用います。 | ||
+ | @Stateも、同様に、コンポーネントに何かを入力するときに用いますが、変化する可能性があるものを@Stateで定義するそうです。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 公式ドキュメント | ||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | ===== @Event and @Listen ===== | ||
+ | @Eventは、EventEmitterと共に、イベントをtriggerするときに用います。??? | ||
+ | Angularでは、テンプレートのところで、 | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | と記載するところを、Stencilでは@Eventを用います。 | ||
+ | https:// | ||
+ | 公式ドキュメント | ||
+ | https:// | ||
行 129: | 行 203: | ||
前:[[00.stencil: | 前:[[00.stencil: | ||
- | 次: | + | 次:[[00.stencil: |