Vue-cliとElementUIの初期設定まとめ

## はじめに
友達が作ったデモを見てかっこいいな〜って言ってたら上記の初期設定を助けてくれたので、そのご好意を忘れて無下にしないうちにまとめておく
#### 動作環境
Mac: Sierra 10.12.6
vue: 3.7.0
ElementUI: 2.8.2

#### 書いている人の前提条件
最近ちょっとだけ、ほんとにちょっとだけVue.jsを勉強した人。基本的な書いてあるソースコードがなんとなく理解できる程度

## Vue-cliのスタート

[Vue CLI](https://cli.vuejs.org)公式ページを参照しながら、
(/home)
:Install

```terminal
$ npm install -g @vue/cli
 ```

:Create a project

```terminal
$ vue ui 
```

そうするとStarting GUI... Ready on http://...
ブラウザでProject Dashboard というページが開く。
(聞いた話だと、VueCLI、バージョンが３に上がってプロジェクト作成画面がGUIベースになったらしい。見やすくて嬉しい)

Vue Project Manager>+Create> ここで自分の作りたいプロジェクトをどこにおくかを選択。+Create a new project hereで新しいプロジェクトのフォルダー名やpackage manager, git repositoryの設定ができる。

できたら手元のターミナルで作ったフォルダー(ディレクトリ)に移動する。

```terminal
$ cd "作ったディレクトリ"
$ npm install
$ npm run serve
```

成功すると、
<img width="394" alt="スクリーンショット 2019-05-08 16.43.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403720/7d578988-4c24-10c3-3fe1-ae91effa4fe9.png">
こんな感じの表示になるので、Local: ...　のurlのところをブラウザで開く。(MacでCommand押しながらurlをタップしたら標準ブラウザで開いた、便利)

開くと、Vui-cliおなじみの色々書いてあるページに到着。

## Vue-cliをいじってみる

#### まずはちょっと理解してみる

srcディレクトリの中のApp.vueとHelloWorld.vueを見てみる。

つたない理解をメモしておくと、（読み飛ばし推奨）
- まず最初にApp.vueのscriptタグでHelloWorldをインポートする
- インポートしたHelloWorldをexport defaultの中のcomponentsに登録する
- 次にHelloWorld.vueのscriptタグの中を見ると、export defaultがname: HelloWorld、props: {msg: String }、で設定されている。msgはStringを受け取るよ、と理解。
- HelloWorld.vueのtempleteタグの中に、表示されるmsgの存在を確認
- App.vueに戻って、templeteタグの中を見て見ると、divタグの中にHelloworld ...というタグを発見。この中のmsg="Welcome to..."がHelloWorld.vueに渡されて表示される
...とこんな感じの流れなのではないかと思っている。

#### ちょっといじってみる

ここからちょっとだけHelloWorld.vueのtempleteタグの中身をいじってみた。(WebStorm使った) 

templeteタグの中身を全部消して、

```vue
<templete>
  <div>
    {{ msg }}
  </div>
</templete>
```

にすると、
<img width="720" alt="スクリーンショット 2019-05-08 17.30.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403720/19e7d2a9-4917-44d9-6c1c-ed9c8326fa11.png">
できた。上で理解したかな...なポイントを一番簡略化しててこれが一番わかりやすい。

とりあえず基本的な構造に関しては最初はこれくらいで


## ElementUIも触ってみる

#### まずはインストール
[ElementUI](https://element.eleme.io/#/en-US)

```terminal
$ npm i element-ui -S
``` 

iはinstall。npmが勝手に補完してくれて便利らしい。~~友達はelement-uiでタイポしてたけど~~

次に、コマンド```npm run serve```で任意のページをブラウザでもう一度立ち上げて、ここから中身をいじってみる

#### 簡単なボタンを追加してみる

まずは、main.jsでElementUIをインポートする。
公式のページから、Home>Component>Development>Quick StartからFully importを参照。

```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

Vue.use(ElementUI);
```

main.jsにここまで追加。

次に、[ElementUI](https://element.eleme.io/#/en-US)からComponent>Basic>Button>Usage Buttonから、ぱっと見でわかりやすいものを一つ選んでHelloWorld.vueのtempleteタグの中、divタグの中に追加してみる。Primaryボタンが青くて綺麗だったから選んでみた。

```vue
<template>
  <div>
      {{ word }}
      <el-button type="primary">Primary</el-button>
  </div>
</template>
```

表示された
<img width="888" alt="スクリーンショット 2019-05-08 18.21.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403720/5e47b1d1-fe51-5e73-b508-640ef2b021a5.png">


## Buttonにイベントをつけてみる

せっかくなのでVue.jsのおさらいを兼ねてイベントを実装。...ここはあとで気が向いたら付け加えます。




## 驚いたこと
Vue.jsとかElementUIに詳しい人ならあたりまえだろ！と思うだろうけど...
- htmlとかcssとか、それぞれのファイルがない！ 一個のファイルに一つのパーツの中身がまとまってるからわかりやすい
- ElementUIさえインストールしちゃえばほんとになんでも作れそう！


今後もうちょっと色々な機能を触ってみようと思う。教えてくれたお友達ありがとう！