フロントエンド初心者によるVue.jsスタートガイド

自分用のメモなので、任意追加します。
最終更新 : 2018/04/12

ネイティブアプリの開発者です。
フロントエンドの開発をすることになりましたが、全くわかりません。
開発に際して覚えることが多すぎるので、後から見返すためのメモがてら記事を書きます。

ちなみに、"$"マークから始まっている記述はCUIで入力するコマンドの先頭を明示するのに使われているだけなので、実際に入力する必要はありません。
例えば`$ npm -v`と書いてあった場合、実際に入力するのは`npm -v`だけです。


mac向けです

# 開発準備
まずはvue-cliをインストールする必要がありますが、
完全にフロントエンドに触ってない場合は色々と前段階でインストールする必要があります。
すでにインストール済みのものがある場合は、任意スキップ。


## Node.jsのインストール
参考 : [node.jsのversionを管理するためにnodebrewを利用する](https://qiita.com/sinmetal/items/154e81823f386279b33c)
上記を参考に、nodebrewを使ってNode.jsをインストールする。
Node.jsをインストールすれば、npmが使えるようになります。

## vue-cliをインストール

```
$ npm install --global vue-cli
```

# 開発環境
頑張ればあとはテキストエディタでも開発はできますが、
ちゃんとIDE使った方がいいです。

WebStormがVue.jsをサポートしていますのでおすすめ。
※日本語の代理店サイトの方を貼ってます。
https://samuraism.com/jetbrains/webstorm
私はWebStormを内包したIntelliJ IDEA Ultimateを使います。
https://samuraism.com/jetbrains/intellij-idea

## 新規作成
`File > New > Project...`
`Static Web > Vue.js`
![スクリーンショット 2018-04-11 12.24.14.png](https://qiita-image-store.s3.amazonaws.com/0/34166/aa00bbfc-0691-d21b-ce8b-c6509af3a3c9.png)

適当にプロジェクト名を付けたりしつつNext連打していればプロジェクトが作成されます。


# エディタの設定
エディタは日本語化も可能ですが、わからないことをGoogleで調べるときに困難なので
基本的に英語のままで作業することをおすすめ。

## 日本語化の戻し方
Pleiadesを使って日本語化してしまったよ、という場合
`ヘルプ > カスタム VM オプションの編集...`
おおよそ最終行にある`javaagent`の先頭に`#`記号を追加してIDEを再起動

```
#-javaagent:/Users/xxx/Library/Preferences/IntelliJIdea2018.1/jp.sourceforge.mergedoc.pleiades/pleiades.jar
```

## ナビゲータの表示
`View > Tool Window > Project`
`View > Tool Window > Terminal`
`View > Tool Window > npm`
![スクリーンショット 2018-04-11 12.50.03.png](https://qiita-image-store.s3.amazonaws.com/0/34166/23223681-ec39-1da9-331b-621d8968ea03.png)
devをダブルクリックすれば起動できる

![スクリーンショット 2018-04-11 12.51.14.png](https://qiita-image-store.s3.amazonaws.com/0/34166/1d5be0e1-b370-7394-0feb-ee315b9883e1.png)
ビルド結果のリンク部分をクリックすれば表示できる。
確認が終わったら停止も忘れずに

## インデント設定
![スクリーンショット 2018-04-11 12.54.47.png](https://qiita-image-store.s3.amazonaws.com/0/34166/8fa817ec-1278-0018-54c8-82204501694e.png)
`.editorconfig`のindent_sizeを変更する。普段は4で作業している。


# 標準設定の内容について
IDEから新規作成するときに色々とプラグインを使うかどうか、など聞かれているが
初学者がそんなものわかるわけがなくて、実際動かしてみると標準と違う構文になっててなんだこれはってなる

◆ 以下、色々書いてたけど、既に解説済みの記事があった。
[vue-cliでVue.jsをインストールしたときのファイルについて](https://qiita.com/magaya0403/items/2b5d9641592df0c7cba2)

## vue-router
![スクリーンショット 2018-04-11 12.58.02.png](https://qiita-image-store.s3.amazonaws.com/0/34166/04c26c46-70df-d33d-8604-666d0d5c5d02.png)
https://router.vuejs.org/ja/
　ぼんやりと学習してると、なんでわざわざこんな面倒な真似してリンクの制御なんてしないといけないんだ？ 普通にアンカータグでいいじゃんとか思ってた。
　冷静に考えたらこうやってルーティングを制御しないと各フォルダに`index.html`とか置いてフォルダの規則を厳密に制御してファイルの移動もできないとかはるかに窮屈な感じになるんだよね。
　ここで定義するだけで自由にファイルのリンクもできるし、動的なルートマッチングもできるとか素晴らしいじゃないか。

 書式や書き方については解説されている記事が既に色々あるのと、テンプレート作成時に`src/router/index.js`に作成されている物を参照。

- [Vue-routerを使って、SPAをシンプルにはじめてみる](https://qiita.com/567000/items/d6a7c694a370dc92e774)
- [Vue.jsとVuexとvue-routerとwebpackで単一ファイルコンポーネント化してTodoListを作ってみた](https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42c)

## ESLint
![スクリーンショット 2018-04-11 12.58.38.png](https://qiita-image-store.s3.amazonaws.com/0/34166/c4f4389d-5141-b0b2-3e07-d7c8b4c1f71a.png)
静的検証ツール
括弧の使い方や、文法上の誤りなどの検知、スタイルの統一をするのに便利

## vue-loader
https://vue-loader.vuejs.org/ja/
　テンプレートから作成したVue.jsのプロジェクトが、なんだか検索で出てくる情報と微妙に文法が違ってるような気がします。
　そう、vue-loaderの記法になってるからです。

　なぜvue-loaderを使うのか、それによる利点などは公式のgithubを読むのが手取り早いです。
　https://github.com/vuejs/vue-loader/tree/master/docs/ja

 トランスパイルって頻繁に出てくる単語の意味は以下
- [JavaScript(ECMAScript)のトランスパイル(transpile)とPolyfillの違いについてまとめてみた](https://qiita.com/Sekky0905/items/4515203428d9715fde5f)


# Type Script
Vue.jsではversion2.5からType Scriptへのサポートが強化されています。
Type Script使わないと、型宣言が無いとか怖い。
https://jp.vuejs.org/v2/guide/typescript.html

- [とにかく楽してVue.jsでTypeScriptを使いたい](https://www.slideshare.net/sakura_pr/vuejstype-script-81228009)