00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2019/01/02] – [ヘッダー+αのみのシンプルなテンプレート] adash333 | 00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2019/08/13] (現在) – [02.codesandboxのvue.jsでvuetifyのテンプレート] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
===== 02.codesandboxのvue.jsでvuetifyのテンプレート ===== | ===== 02.codesandboxのvue.jsでvuetifyのテンプレート ===== | ||
+ | | ||
+ | 2019/ | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | CodeSandboxで新規Vue.jsアプリを作成し、以下の操作を行います。 | ||
+ | |||
+ | -https:// | ||
+ | -Add Dependencyから、Vuetifyをインストール | ||
+ | -public/ | ||
+ | -src/ | ||
+ | -src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | public/ | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | ===== 2019年1月以前の方法 ===== | ||
+ | 2019/ | ||
CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。 | CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。 | ||
行 15: | 行 51: | ||
{{: | {{: | ||
- | ===== 上記の後、src/ | + | ===== 上記の後、src/ |
例えば、src/ | 例えば、src/ | ||
行 33: | 行 69: | ||
</ | </ | ||
- | ===== ヘッダー+αのみのシンプルなテンプレート ===== | + | ===== ヘッダー+αのみのシンプルなテンプレート『テンプレート2』 |
src/App.vue | src/App.vue | ||
行 41: | 行 77: | ||
{{: | {{: | ||
+ | ===== 『テンプレート3』 ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | こちらのサイトのテンプレートを転記させて頂きます。 | ||
+ | |||
+ | (引用ここから) | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <v-flex xs12 offset-mx5> | ||
+ | Home Component. | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | data: () => ({ | ||
+ | }), | ||
+ | |||
+ | props: { | ||
+ | }, | ||
+ | |||
+ | created() { | ||
+ | console.log(' | ||
+ | this.initialize() | ||
+ | }, | ||
+ | |||
+ | mounted() { | ||
+ | console.log(' | ||
+ | }, | ||
+ | |||
+ | methods: { | ||
+ | initialize: function() { | ||
+ | }, | ||
+ | }, | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | (引用ここまで) | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
===== Vuetifyに関するリンク ===== | ===== Vuetifyに関するリンク ===== | ||
00.vue用デザインフレームワークvuetify/02.codesandboxのvue.jsでvuetifyテンプレート.txt · 最終更新: 2019/08/13 by adash333