前提・実現したいこと
【デモ環境あり】GASを使って掲示板を作ってみた話
上記のリンクを参考にして、Webアプリケーションを作っていて、Yahoo知識袋みたいな質問投稿サイトを作りたい。
発生している問題
プログラムを組んでプレビューすると、Vuetifyの機能(<v-app>や<v-container>など)の機能のみが機能しない。
該当のソースコード
error.html
1<html> 2<head> 3 <base target="_top"> 4 <meta charset="utf-8"> 5 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 6 <!--<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">--> 7 <?!= HtmlService.createHtmlOutputFromFile('vuetify.min.css').getContent(); ?> 8 <title>SNSBoard</title> 9</head> 10<body> 11 <p>errorページが表示されています</p> 12 <div>hogehoge</div> 13 <div id="app"> 14 <v-app> 15 <vue-toollist></vue-toollist> 16 <v-container grid-list-md> 17 <v-layout row wrap> 18 <v-flex xs12> 19 <p>ただいま、更新処理中です。</p> 20 <p>一定時間後、再度アクセスを行なってください。</p> 21 <v-flex> 22 <v-layout> 23 24 </v-app> 25 </div> 26</body> 27</html> 28 29<?!= HtmlService.createHtmlOutputFromFile('vue.js').getContent(); ?> 30<?!= HtmlService.createHtmlOutputFromFile('vuetify.js').getContent(); ?> 31 32<?!= HtmlService.createHtmlOutputFromFile('vue_toolList').getContent(); ?> 33 34<script> 35const app = new Vue 36({ 37 el : "#app" 38 ,data() 39 { 40 return{ 41 } 42 } 43 ,methods: 44 { 45 } 46 ,mounted() 47 { 48 } 49 ,components: 50 { 51 'vue-toollist' : vue_toolList 52 } 53}) 54</script>
外部ファイルのVue.jsやVuetify.js, Vuetify.min.cssなどは他のURLからのアクセスの回数を減らすため、ローカルのファイルにコードを丸コピしています。
詳しくはこちらを見てください。
参考にしたソースコード
補足情報(FW/ツールのバージョンなど)
Vue.js : v2.6.14
回答1件
あなたの回答
tips
プレビュー