コラム

[Vue.js]Vue.jsプロジェクトの構造

Vue.jsには、プロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されています。
Vue CLIは、Vue.jsをアプリケーションとして開発する為の支援するツールです。
eclipseのようなGUIのあるツールではありませんが、プロジェクトに必要な機能の提供やツールのインストールをしてくれます。

今回はVue.jsのプロジェクトをVue CLIで作成して、テンプレートの中身を見ていきたいと思います。

開発環境

Windows10 Enterprise
npm 8.1.2
node 16.13.2

インストール・プロジェクト作成

Node.jsのインストールします。
https://nodejs.org/ja/から取得して、インストールして下さい。
インストールが完了したら下記の処理を行います。

#Vue CLIのインストール
npm install -g @vue/cli

#PowerShellのスクリプトの実行条件確認 
Get-ExecutionPolicy

#RemoteSignedになっていなかったら実行ポリシーを設定
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

#プロジェクトの作成(vue-sampleディレクトリに作成)
#インストールするプリセットの選択画面に行くので、取り合えず「Default ([Vue 2] babel, eslint)」を選択
vue create vue-sample

#作成完了後、webサーバを起動してテンプレートを表示してみる
cd vue-sample
npm run serve

http://localhost:8080/にアクセスして下記画面が出れば正常に作成されています。

プロジェクトの中を見てみる

プロジェクトの中身を見ていきます。

基本構成

vue-sample - node_modules/
           - public/
           - src/
           - babel.config.js
           - package.json
           - package-lock.json
           - README.md
ディレクトリ・ファイル説明
node_modulesnpmパッケージを管理するディレクトリ
publicビルドされないhtmlファイルや画像等を格納する
srcビルドされるファイルを格納するディレクトリ
この下が実装してものを格納するメインディレクトリになる
package.jsonnpmパッケージ、起動タスクを定義
package-lock.jsonpackage.jsonの予備ファイル
README.md起動コマンドの説明

実装者にとってまず一番重要なのがpublicとsrc以下なので、以下では各ディレクトリの中を詳しく見ていきます。

publicディレクトリ

index.htmlとfavicon.icoがあります。
index.htmlが全てのベースのhtmlになります。favicon.icoはindex.htmlの中で使用されています。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title> ①
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>　②
    <!-- built files will be auto injected -->
  </body>
</html>

① package.jsonのnameプロパティで定義されています。
② src以下で実装したものを表示します。

srcディレクトリ

・main.jsファイル
Vue.jsを使用する為の定義をします。
一般的なVue.jsの使用、その他拡張機能の定義をこのファイルで行います。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

・App.vueファイル
publicディレクトリのindex.htmlの中に表示する内容を記述します。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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タグとscriptタグに分かれています。
templateタグ内には画面レイアウト、scriptタグ内にはデータ、コンポーネント定義、各処理を記述します。

template部分

<template>
  <div id="app"> ①
    <img alt="Vue logo" src="./assets/logo.png">　②
    <HelloWorld msg="Welcome to Your Vue.js App"/> ③
  </div>
</template>

① この部分は固定、main.jsの記述と紐づいています。（main.jsについては後述）
② HelloWorldというコンポーネントを使用している、どのような動作をするかはcomponentsのHelloWorld.vueにコーディングしてあります。

script部分

<script>
import HelloWorld from './components/HelloWorld.vue' ①

export default {
  name: 'App',　②
  components: {
    HelloWorld　③
  }
}
</script>

① src\components\HelloWorld.vueにHelloWorldというコンポーネントが実装されていて、それを使用可能に宣言しています。
② コンポーネント名を指定します。（任意でつけて良い）
③ 宣言したコンポーネントを定義して当該ファイルで使用可能にします。

・ components/HelloWorld.vue
コンポーネントが定義してあるファイルです。実装の構成はApp.vueと同様に<template>と<script>があります。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1> ①
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String　②
  }
}
</script>

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

① <script>内で定義されている変数のmsgを表示するコードです。
② 当コンポーネント使用時に値を与える事が出来ます。この例ではApp.vueからHelloWorldを呼ぶ時に値を与えています。以下の部分がそのコードです。

#msg="Welcome to Your Vue.js App"でHelloWorldコンポーネントに値を与えています。

<HelloWorld msg="Welcome to Your Vue.js App"/>

以上がコードの簡単な説明になります。
次はnpm runコマンドで可能な事を説明していきます。npm runコマンドはwebサーバ起動時に「npm run serve」を使用していますが、その他にも定義されているものがありますのでそれを説明していきます。

npm run コマンド

npm runコマンドはpackage.jsonに定義してあります。
以下の部分が定義箇所です。ここに追加する事で他の処理も出来るようになります。
取り敢えず、既に定義されているものを見ていきましょう。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

・serve
serveは当該プロジェクト用の簡易Webサーバを起動する事が出来ます。
画面のテストに使用すると便利です。

・build
簡易webサーバではない、通常webサーバで動作するファイルを出力します。
このコマンド出力されたファイル群を通常webサーバのドキュメントディレクトリに配置し動作させます。

・lint
実装コード規約のチェックをしてくれます。
何もしなくてもデフォルトで定義された規約に基づきチェックしてくれますが、自分でも定義する事が可能です。
これについては、後に記事にしたいと思います。

以上Vueプロジェクトの構造を簡単に説明しました。
プロジェクト形式で開発する事により、テスト、ビルド、規約のチェックも行え、機能追加も簡単に行えるので便利です。
次回はVueRouterと言うSPA(Single Page Application)でのルーティング制御機能を使用して画面切り替えアプリを作成してみたいと思います。

続けてお読みください

[Vue.js]Vue.jsでSpringBootからAjaxでデータ取得

この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせはこちら
お電話でのお問い合わせ 03-5820-1777（平日10:00〜18:00）
よくあるご質問