• 技術が集うTECH GUILD

    Vue.jsで、vue init webpackしたときに生成されるindex.html/main.js/App.vue/HelloWorld.vueがどのような構造になっているか整理しました。
    Vueはシンプルで学習コストが低いと紹介されていることが多いのですが、個人的な感想では、Vue CLIを導入するところから難しく感じました。そこにきて、HelloWorldの構造もよくわからず、どこをいじって改変していくのか、初見でわかりませんでした。

    概要

    以前の記事で、外部JavaScript呼び出しでお手軽にVueを始めることを試しました。ただ、本格的にVueを利用するために、様々なツールやライブラリの恩恵を受けるためにVue CLIの導入が必須だと感じます。ところが、vue init webpackして出力されるファイルがややこしく、どこをどう触っていくのかいまいちわからないと感じていました。

    HelloWorldが既に入れ子になっていて、難解に感じたので、順を追って整理してみます。
    vue initする際にvue-routerの使用を[Y]にしていると、さらにややこしくなるので、まずは、Vue Routerなしで見てみます。

    ソースはGitHubに載せました。

    詳細

    各ファイルの内容を順に参照する

    見て行く順は、index.html -> main.js -> App.vue -> HelloWorld.vueの順です。

    index.html

    まずはHTMLから見ます。

    index.html
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue_app_norouter</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>

    この中で<div id=”app”></div>がポイントです。

    main.js

    次にmain.jsを見てみます。

    main.js
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: ''
    })

    el: ‘#app’が先ほどの<div id=”app”></div>タグと紐づいています。

    import App from ‘./App’でApp.vueを読み込み、components: { App },でコンポーネントとして呼び出しています。

    index.htmlに<script>タグでmain.jsを外部ファイル読み込みする記述がないのですが、どうしてjsがロードされるのでしょうか。。。

    App.vue

    次にApp.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>
    
    <style>
    #app {
     〜〜省略〜〜
    }
    </style>

    まず<style>タグは動作に影響ないので、省いて考えます。

    name: ‘App’,でApp.vueコンポートネントの名前を定義し、

    import HelloWorld from './components/HelloWorld'
      components: {
        HelloWorld
      }

    でHelloWorld.vueコンポーネントを読み込んでいます。

    ここにも<div id=”app”>がありますが、el: ‘#app”とどう関係あるのでしょうか。

    HelloWorld.vue

    最後にHelloWorld.vueを見ます

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <ul>
          <li>
      〜〜省略〜〜
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    これはプロアクティブ変数msgに文字列が設定され、<h1>タグで{{msg}}が読み出されていることがわかります。

    まとめ

    まとめると index.html -> main.js -> App.vue -> HelloWorld.vue の順に入れ子になっていることが確認できました。
    この構造を見るに、独自の処理を記述するなら、HelloWorld.vueをコピペして書き換えるのが良いと考えています。


    コメント一覧

    返信2018年12月26日 22:18

    【Vue.js入門】VueのHelloWorldを解説 (Vue Routerあり) | TECH GUILD23/

    […] 前回記事でVue RouterなしのHelloWorld、「vue_app_norouter」を作成し、記述内容を整理しました。 Vueはシンプルで学習コストが低いと紹介されていることが多いのですが、個人的な感想では、Vue […]

    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください