このページで学べる内容

• Vue.js CLIで生成されるファイル/ディレクトリについて

難易度

☆☆☆

動作環境

• OS : Mac
• yarn : 1.22.18
• @vue/cli : 5.0.4

はじめに

前回Vue CLIで作成したプロジェクトでどんなファイルが生成されているかを見ていきましょう。

ファイル/ディレクトリ一覧

├── .git
├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── node_modules/
│   └── ※省略※
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js
└── yarn.lock

.git

gitのローカルリポジトリです。既に生成されたファイルがcomitされた状態になっています。 git initをやる必要がないので便利ですね。慣れてる人だと逆に余計なお世話だったりしますね。

.gitignore

言わずもがなかもしれませんが、git管理から除外したい資源について管理するファイル。 node_modulesとか、お決まりの内容を最初から設定してくれているので便利

README.md

Vueの開発で使うコマンドについて説明が記載されています。正直そんなに使わないかも。

# sample

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

Babelで利用する設定ファイル。BabelはJavaScriptのコンパイラで、新しいバージョンで書かれたJavaScriptのコードを古いブラウザでも解釈できるように下位互換性のあるJavaScriptに変換するツールです。 Vue CLIでプロジェクトを作成すると、下記の中身になります。これは、BabelがJavaScriptを変換するのに @vue/cli-plugin-babel/presetを利用するように指定しています。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

jsconfig.json

JavaScriptをコンパイルするのに必要な設定を設定します。 Vue CLIでプロジェクトを作成すると最初から下記の内容が記載されています。 targetでes5向けにコンパイルを指定していたり、moduleResolutionでモジュールの解決の方針を指定することが出来ます。

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

package.json

Vueのプロジェクトが利用するパッケージに関する情報を管理するのに利用するファイル。 各パッケージのバージョンも指定でき、package.jsonにバージョンを確り記載することで、他の人もソースコードを取得した場合も同じバージョンで環境を用意することが出来ます。

node_modules/

package.jsonを元にインストールされてたパッケージが配置されるディレクトリです。 利用しているパッケージが多いとファイル量が多くなるので、基本的にはgit管理はせずに、package.jsonから個人毎の環境でパッケージを取得します。

public

webpacageを介さずに公開されるファイル。webpacageとは複数のJSファイルを一つにまとめるもので、そのまま公開したいものはpublicディレクトリに配置しておく。

src

メインとなるディレクトリです。srcに配置されたファイルがビルドされます。

App.vue

アプリケーションの基礎となるファイルです。

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</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>

assets

画像やフォントを格納するディレクトリです。

logo.png

サンプルのロゴファイルです。

components

単一ファイルコンポーネントを格納するディレクトリです。 単一ファイルコンポーネントは、Vue独自のもので1つのファイルの中にHtml、CSS、JavaScriptをセットにし、機能を持つ1つの部品として管理できるようにする仕組みです。

HelloWorld.vue

サンプルのコンポーネントファイルです。

main.js

Vueアプリの起点となるjsファイルです。

vue.config.js

ビルド設定のカスタマイズに利用するファイルです。 プロジェクトのルートディレクトリに配置することで自動で読み込まれます。

yarn.lock

package.jsonを元に実際にインストールされたパッケージの情報が記載されたファイル。 今回はyarnで実行していますが、npmを利用した場合は、同様にpackage.json.lockが生成されます。

最後に

今回の講座で覚えておいてもらいたいことは下記です。

• Vue CLIのプロジェクト作成で生成されるファイルの大まかな概要

実際のアプリケーションのファイル意外にビルド用の設定ファイルなどたくさん出来てることがわかったかと思います。 次回以降はもう少しVueのアプリケーションについて説明できればと思います。