Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Vue + vue-cli】vue-cliの構造とHello World表示

Web開発

【Vue + vue-cli】vue-cliの構造とHello World表示

【Vue + vue-cli】vue-cliの構造とHello World表示

目次

  1. vue-cliの構造
    1. package.json
    2. index.html
    3. main.jsとApp.vue
    4. router > index.js
    5. HelloWorld.vue
  2. Hellow Worldを表示してみる
  3. まとめ

今回はVue.jsのvue-cliを用いて、構造理解とHello Worldの表示まで行っていきたいと思います。

Vue.jsの環境構築とプロジェクト作成、vue-cliのインストールまでは前回の記事で行いましたので、該当記事をご参考ください。

・vue.jsの環境構築
https://www.dailyupblog.com/web_development/716/

それではいきましょう。

vue-cliの構造

プロジェクトフォルダの構造をみてみると、以下のように沢山のファイルがあると思います。

※Visual Studio Codeで表示しています。

今回はファイル構成をざっくりと解説していきたいと思います。

package.json

package.jsonの中身を見てみると、下記のようにjson形式で様々な記述があります。

これは、npm installもしくはyarn installをコマンドライン上で実行した際に、このpackage.json内に記述があるパッケージが全て、同階層に存在する「node_modules」フォルダ内にインストールされます。

例えば、前回の環境構築の記事にて、vueプロジェクトを制作した際に、「vue-router」を利用すると設定したのですが、このvue-routerもpackage.json内に記述があります。

このように必要なパッケージや追加したパッケージが全てこのファイル内に記述されます。

index.html

アクセスした際にこのファイルが一番最初に読み込まれます。

ファイルの中身を見てみると、デフォルトでは下記のような記述になります。

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

基本的なHTMLの構造ですが、bodyタグ内にid=”app”のdivタグが存在します。

このid=”app”タグ内に、コンテンツが呼び出されるのですが、それは次に説明する「src」フォルダ内のデータです。

main.jsとApp.vue

「src」フォルダ内にある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'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

先ほど、index.html内にあったid=”app”のdivタグを指定して、どうやらAppをインポートしているようです。

つまり、最初にAppというファイル内のコンテンツを呼び出しているようです。

そのほかにrouterの記述もありますが、routerとはSPA開発の際に必要な画面遷移を実現してくれるパッケージです。routerについては別の機会に深掘りしようと思います。

以下はmain.js内でインポートされているApp.vueの中身です。

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vueファイルは上記のような構成になります。

一番上のtemplateタグ内に表示するHTMLを記述します。

その下のscriptタグ内にJavascriptの記述をします。

そして、その下のstyleタグ内にスタイルを記述します。

このような構造を単一ファイルコンポーネントといいます。

router > index.js

App.vueのHTML内に<router-view />というタグの記述がありますが、これは先ほど軽く触れた「vue-router」の呼び出しタグです。

「router」フォルダ内に存在するindex.jsファイルの中身にrouterの設定が記載されています。

その中にHelloWorldファイルがルーター設定されています。

詳細につきましては、vue-routerについての記事をアップいたしますので、そちらを参照ください。

今回は省きます。

HelloWorld.vue

ルーターにて呼び出されたHelloWorld.vueファイルです。

「components」フォルダ内にあります。

ファイルの中身は以下のようになります。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

この中に表示されているコンテンツの中身が記載されています。

つまり環境構築後サーバーを起動して最初に表示される下記ページの中身がこのファイルに記述してあります。

Hellow Worldを表示してみる

ざっくりとファイル構成を解説いたしましたので、実際に中身を触ってみましょう。

とりあえず、Hellow Worldをページ上に表示させてみましょう。

余計なものは消してしまいたいので、まずApp.vueを開いて、下記のよう<img src=”./assets/logo.png” />を削除してください。

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <router-view />
  </div>
</template>

↓↓

<template>
  <div id="app">
    <router-view />
  </div>
</template>

次に「conponents」フォルダ内のHelloWorld.vueを開いて、不要箇所を削除します。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

↓↓

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

続いて、同じくHelloWorld.vueファイル内のスクリプト内のmsgのデータを「Hello World!!」に書き換えてください。

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

↓↓

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Hello World!!"
    };
  }
};
</script>

まず、Vueにおけるscript内の記述に関してですが、export defaultとは、外部ファイルから参照（インポート）する際にそれを使えるようにするためにexport defaultで囲う必要があります。

name: “HelloWorld”の部分は外部に読み込ませる際のファイル名として、設定するものです。

data() の中身には基本的にtemplate内で扱うデータを変数とセットで保管しておきます。

ここに記述しておくことで変数をHTML内や関数内で扱うことができます。

今回は、「Hello World!!」という文字列を持った変数msgをtemplate内に表示しています。

template内で変数を扱う際には基本的に二重の中括弧{{}}で括って下さい。

さて、実際にページを確認すると、以下のように表示されているはずです。

まとめ

さて、今回はvue-cliの基本構造と簡単なHello Worldの出力について触れました。

Vue.jsの構造と単一ファイルコンポーネントの記述に慣れる必要がありそうです。

また、今回実際にファイルを編集してみて気づいたと思うのですが、vueでの開発は基本的にホットリロードで行われます。

ホットリロードとは編集後ファイルを保存すると、ブラウザの再読み込みを行わずに、修正が反映されることです。

これによって、開発効率が劇的にアップします。

これもVueのメリットともいえるでしょう。

それでは今回はここまで！

お疲れ様でした！

関連記事

関連記事