【vue.js  #1 】環境構築をしてから開発直前まで

# はじめに
シングルページアプリケーションを作ってみたいと思ったのでvue.jsの環境作りをする際の参考に残します。

ちなみにvue.jsを選んだ理由は、vue, react, angularの中で日本語ドキュメントが充実していたので一番はじめやすそうだったからです！:grinning:

`angular > react > vue` の順で習得が難しいそうです。
`vue > angular > react` の順で日本語ドキュメントが充実しています。

## 前提

npmがすでに使える環境を用意する必要があります。（自分はすでにできているので割愛しちゃいます）

# vue.jsの環境構築手順

## vueのインストール

npmコマンドで、vue-cliパッケージをインストール

```
$ npm install -g vue-cli~
```

完了です。:flushed:


## プロジェクト作成

試しにfirst-vue というプロジェクトを作成。
プロジェクト名や説明、作成者等質問されますがEnterで先へ進めても問題ありませんでした。

```
$ vue init webpack first-vue
```

## index.htmlファイルを見つける

プロジェクト直下に移動すると、ディレクトリができているのが確認できます！
index.htmlファイルもプロジェクト直下に配置されています。

```
$ cd first-vue 
$ ll
total 100
drwxr-xr-x    8 root    root     4096 Jan 18 21:24 ./
drwxrwxr-x    3 vagrant vagrant  4096 Jan 18 21:24 ../
-rw-r--r--    1 root    root      402 Jan 18 21:24 .babelrc
drwxr-xr-x    2 root    root     4096 Jan 18 21:24 build/
drwxr-xr-x    2 root    root     4096 Jan 18 21:24 config/
-rw-r--r--    1 root    root      147 Jan 18 21:24 .editorconfig
-rw-r--r--    1 root    root       51 Jan 18 21:24 .eslintignore
-rw-r--r--    1 root    root      791 Jan 18 21:24 .eslintrc.js
-rw-r--r--    1 root    root      213 Jan 18 21:24 .gitignore
-rw-r--r--    1 root    root      271 Jan 18 21:24 index.html
drwxr-xr-x 1026 root    root    36864 Jan 18 21:25 node_modules/
-rw-r--r--    1 root    root     2695 Jan 18 21:24 package.json
-rw-r--r--    1 root    root      246 Jan 18 21:24 .postcssrc.js
-rw-r--r--    1 root    root      552 Jan 18 21:24 README.md
drwxr-xr-x    5 root    root     4096 Jan 18 21:24 src/
drwxr-xr-x    2 root    root     4096 Jan 18 21:24 static/
drwxr-xr-x    4 root    root     4096 Jan 18 21:24 test/
```

## index.htmlの中身

index.htmlがあったので、開いてみます。:eyeglasses:

```
$ vim index.html

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

`<script>`タグもなく、javascriptが読み込まれていない...。:thinking:

### buildする。

```
$ npm run dev
```

`./dist/index.html`にindex.htmlが作成されます。

```
$ vim ./dist/index.html

-------
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>first-vue</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css
rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.4a04c5bd29b0304c7
bd7.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html>
-------
```

buildすると、./dist/index.htmlにファイルが作られます。


./dist/index.htmlを開くと、`<script>`タグも含まれています。

```
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>first-vue</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css
rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.4a04c5bd29b0304c7
bd7.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html>
```
こちらがvue.jsのコアになるindex.htmlファイルのようです。:ok_woman:

表画面も確認できます。

![スクリーンショット 2019-01-29 20.55.22.png](https://qiita-image-store.s3.amazonaws.com/0/174529/7da00471-8a65-de91-7795-0bc199274322.png)


一旦ここまでで、開発に入れるようです！:santa:

プロジェクト直下のindex.htmlファイルの役割などは後ほど追記します。  



vue.js 公式サイト

* https://jp.vuejs.org/v2/guide/installation.html