Vue.jsを使う方法

この記事は私の印象です。Vue.jsに使うのいい方法を共有したいです。
最初から開発できる「コードを書くこと」までのtutorialです。
もし、他の方法・質問・ご意見があったら、是非下にコメントしてください。
と間違えた日本語がある場合は申し訳ございませんでした。

# バックグラウンド
この記事は、vue.jsを使っている人が最初の経験のためです。
その人を手伝うのためにこの記事を書きます。
多分最初からVue.jsを使う、ドキュメンテーションを読むすることがちょっと難しいと思います。
ドキュメンテーションには全部の説明が入るですから、最初セットアップのステップがあまり理解できません。
どこから？何が必要か？どうやって？いつこのものが使うか？ この質問が出てくると思います
最初使っている人は多分複雑と思います。

これは全部自分からの経験です。最初は使う時いろいろなものを理解できませんでした。
他のサイトから調べますした。ちょっと時間がかかりました。そして理解することができる前に、自分で2~3回ぐらいセットアップしました。
ちょっと大変と思った、だからこの記事を書きます。
と他の問題も見つけた、vue 2 nativeを使ってtutorialがあまり見つけられません。
# 必要なもの
- Node.js v8.11.0+ (NPM v5.6.0+)
- vue-cli v3.0.0+
 
# プロジェクト作る
プロジェクトを開始する、vue-cliを使います。
vue-cliを使うプロジェクトに開始する二つ方法があります。

1. ターミナルを使います
     1. ターミナルに書きます `vue create {project-name}`
2.  vueのGUIを使います
     1. ターミナルに書きます `vue ui`

この記事はvueのGUIはおすすめします、なぜなら、vueのGUIはグラフィックとかボタンーがあります。もっと簡単に理解と思います。

**作るステップ**
### 1. オープンGUI UI
最初はターミナルに「vue ui」書きます。GUIページへリダイレクトまで待っています。
 ![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/186068f0-e14a-baf8-c302-e90fd6a4183a.png)

### 2. プロジェクト作る
GUIを使用してプロジェクトを作るには、プロジェクトマネージャのクリエートタブを移動します。そして、「Create a new project here」のボタンをクリックして次のページに移動します
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/f50c87fb-d279-5ee9-df51-76b2e6cbc303.png)

### 3. プロジェクト詳細
プロジェクトフォルダ名を入力します、パッケージマネージャを選びます。
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/41395ad9-b361-26fc-7876-6324f4fd7af0.png)

### 4. プロジェクトプリセット
「Default preset」とか「Manual」を選びます。もし、「Default preset」を選んだならすぐにプロジェクトが作りします。もし、「Manual」を選んだなら次のページに移動します。
※「Manual」をおすすめします
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/d42925bd-e7b8-ffaa-6be5-ffda824d0015.png)

### 5. プロジェクトライブラリ
このページでは自分のプロジェクト設定のライブラリを選択できます。プロジェクト作ったあともこのページリストにないライブラリをインストールすることができます。
**もし、「Router」をチェックしたなら次「Configuration」のページに移動します。**
※「Babel、Router、Vuex」をチェックにおすすめします
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/7e5a12e8-9be6-f5dc-1ea8-5f47aa3377ee.png)

#### 5.1. 「Router」のConfigurationページ
**※Routerチェックしただけの画面**
このオプションをチェックにおすすめします。でもチェックしなくても大丈夫です。プロジェクト作ったあともコードで変更ことができます。
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/87c52309-00af-dc8f-0187-0b2d93481e95.png)

### 6. 設定を保存する
このモダールはさっきえらんだの設定を保存する。将来同じの設定プロジェクトのためです。もし保存しないなら、「Continue without saving」のボタンをクリックします。そしてインストールするに待っています。終わったなら次のページを移動します。
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/0fb07972-8c9f-7293-b845-e97bc12c26ac.png)

### 7. Vue UIのダッシュボード
このページではサイドバーの部分５つのメニューがあります。プロジェクトをランするには、「Tasks」のボタンをクリックします。そして次のページに移動します。
もし他のライブラリをインストールしたいなら、「Dependencies」をクリックします。そしてDependenciesのページを移動します。
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/621356e8-4e25-365a-4d28-d7589936b3de.png)

### 8. Vue UIのTasksダッシュボード
プロジェクトを開始する「Run task」のボタンをクリックします。buildingを待っています。buildingあとは「Open app」のボタンをクリックすることができます。
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/362bc4e3-628e-a744-6bbd-44f29bdfc40e.png)

### 9. プロジェクトを開発することができます！
このページを見れば、すでにvueプロジェクトを設定は完成しました。開発することができます。コード書くことができます。
![capture.png](https://qiita-image-store.s3.amazonaws.com/0/293079/93307659-1f5f-374c-28c2-e68af773ec2b.png)

# ドキュメントリンク
- [Vue.js](https://vuejs.org/)
- [Vue CLI 3](https://cli.vuejs.org/)
- [**Vuex**](https://vuex.vuejs.org/) ー＞おすすめのライブラリ
- [**Vue Router**](https://router.vuejs.org/)　ー＞おすすめのライブラリ
- [***Vuetify***](https://vuetifyjs.com/en/)　ー＞他おすすめのライブラリ
- [***axios***](https://github.com/axios/axios)　ー＞他おすすめのライブラリ