内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
00.vue用デザインフレームワークvuetify
»
02.codesandboxのvue.jsでvuetifyテンプレート
トレース:
00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== 02.codesandboxのvue.jsでvuetifyのテンプレート ===== ---//2019/08/13 更新// 2019/8/13時点で、やり方が変更になっています。 https://codesandbox.io/s/vue-vuetify-template-2019-aug-dn1t2 {{:00.vue用デザインフレームワークvuetify:pasted:20190813-063706.png}} CodeSandboxで新規Vue.jsアプリを作成し、以下の操作を行います。 -https://codesandbox.io/で、Create Sandboxをクリックし、Vue.jsアプリを作成 -Add Dependencyから、Vuetifyをインストール -public/index.htmlの編集 -src/main.jsの編集 -src/App.vueの編集 {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064151.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064211.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064325.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064718.png}} public/index.htmlと、src/main.jsと、src/App.vueを以下のコードをコピペします。 <html> <script src="https://gist.github.com/adash333/5e28b9e5ea59c38eb04e24bff7c50419.js"></script> </html> https://codesandbox.io/s/vue-vuetify-template-2019-aug-dn1t2 {{:00.vue用デザインフレームワークvuetify:pasted:20190813-070055.png}} ===== 2019年1月以前の方法 ===== 2019/8/13時点で、Vuetifyの変更のためか、以下のやり方そのままではうまくいきません。 CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。 -Add Dependencyから、Vuetifyをインストール -index.htmlの編集 -src/main.jsの編集 <html> <script src="https://gist.github.com/adash333/a61cf750e6c8410bc53f65a43ca8c84c.js"></script> </html> {{:00.vue用デザインフレームワークvuetify:pasted:20181218-235049.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20181218-235216.png}} ===== 上記の後、src/App.vueを編集し、Vuetifyによるデザインを行う『テンプレート1』 ===== 例えば、src/App.vueを以下のように編集すると、ヘッダーとフッターが表示される。 参考:https://vuetifyjs.com/ja/examples/layouts/baseline https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/footer/companyFooter.vue <html> <script src="https://gist.github.com/adash333/5a39a4915c1ed91d5ac97a380c55f0d1.js"></script> </html> 以下のような感じになる。 <html> <iframe src="https://codesandbox.io/embed/x2o3mpjwmq" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> </html> ===== ヘッダー+αのみのシンプルなテンプレート『テンプレート2』 ===== src/App.vue <html> <script src="https://gist.github.com/adash333/9ce50ce8af30f0a214f2372820da1c13.js"></script> </html> {{:00.vue用デザインフレームワークvuetify:pasted:20190102-181708.png}} ===== 『テンプレート3』 ===== https://qiita.com/nobu-maple/items/43c1228b8f04837d753b#4home-コンポーネント作成 こちらのサイトのテンプレートを転記させて頂きます。 (引用ここから) <code> <template> <v-content> <v-container fluid fill-height> <v-layout justify-center fluid> <v-flex xs12 offset-mx5> Home Component. </v-flex> </v-layout> </v-container> </v-content> </template> <script> export default { data: () => ({ }), props: { }, created() { console.log('Home Component created.') this.initialize() }, mounted() { console.log('Home Component mounted.') }, methods: { initialize: function() { }, }, } </script> </code> (引用ここまで) ===== Vuetifyに関するリンク ===== https://vuetifyjs.com/ja/ {{:00.vue用デザインフレームワークvuetify:pasted:20190102-180523.png}}
00.vue用デザインフレームワークvuetify/02.codesandboxのvue.jsでvuetifyテンプレート.txt
· 最終更新: 2019/08/13 by
adash333
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ