vue.jsプロジェクト作成時に作られるファイルについてです！
エントリーポイント
Webページ同様、index.htmlから始まるものと思われます。
./src/index.htmlには
<body> <div id="app"></div> </body>
という箇所があります。
この「id="app"」が、jsに紐付いているようです。
Vueオブジェクトが作られる
./src/main.jsに
new Vue({ el: '#app',
と書かれています。
「el: '#app'」というのが、index.htmlの「id="app"」に紐づくようです。
こちらがmain.jsの全文です。
import Vue from 'vue' import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ var app = new Vue({ el: '#app', components: { App }, template: '<App/>' })
Appというコンポーネントを指定しています。
Appはimportで「./App」ですよーと言っています。
同じフォルダに「App.vue」というファイルがいるので、コチラを見てみます。
コンポーネント
vueファイルが1つ分のコンポーネントのようです。
vueファイル内には
- html
- javascript
- CSS
が1ファイルにまとまっていて、それぞれ
<template> ... </template> <script> ... </script> <style> ... </style>
と区分けされています。
最初にApp.vueが呼び出されているので、ここのtemplateが表示されているようです。
1ファイルでscriptとstyleが書かれているので、ロジックやCSSを記述すると、ちゃんとこのファイルに適用されます。
templateの記述について
最初知らずに書いてエラーしたのですが、template内は
- template下に書けるのは1要素のみ(親)
- 複数要素はこの親の下に書いていく
なので、このようにするのはNGです。
<template> <p>hoge</p> <div> huga </div> </template>
HTMLを構成するには、複数の要素を書きますよね。
なので親を1つ設けて、構造を作っていきます。
<template> <div> <p>hoge</p> huga </div> </template>
Vueファイルの連携
App.vueはこのように書かれています。
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld/> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { name: 'App', components: { HelloWorld } } </script>
他のvueファイルをインポート
script内をまず見てみます。
「./components/HelloWorld」というvueファイルを「HelloWorld」という名称でインポートしています。
HelloWorld.vueというファイル名ですが、import時は「.vue」という拡張子は省略するようです。
コンポーネントとして使う
次に「export default {}」という箇所です。
このファイル内の情報が、JSON形式で書かれています。
「components: []」の中に、先程インポートされていた「HelloWorld」が書かれていますね。
コンポーネントとして登録された状態で、templateのタグとして使用します。
するとvueファイルの内容が、タグを書いた場所に設定されます。
これと同じことをしていけば、好きなファイルを作って、表示の中に組み込んでいくことができますね！
参考
コチラを参考にしました。ありがとうございました！
あとがき
vue.jsのファイル構成についてでした！
手を動かして理解していっていますが、なんとなく理解してきました。
