【日記】久しぶりにVueでも触るか

# そもそも Vue ってなんだっけ
>Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため......

[出典：はじめに — Vue.js](https://jp.vuejs.org/v2/guide/index.html)


はー、なに言ってんだかわかんねえや

# とりあえず CLI 入れとこか
```bash
> yarn global add @vue/cli

> vue --version
@vue/cli 4.2.2
```
これでオッケーだな

## Instant Prototyping ってなんだ？入れとくか
```bash
> yarn global add @vue/cli @vue/cli-service-global
```

## vue serve？サーバー機能か
* `App.vue`を用意して
* `vue serve`を叩け、と

## 作業ディレクトリでも用意するか
`D:\Projects\vuepro`を用意した。

### `App.vue` 作るか
* 右クリックから→新規作成→テキストファイル
* メモ帳で開いて、貼り付け

```vue
<template>
  <h1>Hello!</h1>
</template>
```
* ファイル名を`App.vue`に変更、と

### まあせっかくだし`VSCode`で作業するか
* ワークスペースにさっき作った`D:\Projects\vuepro`を追加
* さっき作った`App.vue`が表示されているので開く

#### ん？なになに`このファイルの種類には拡張機能 'Vetur' が推奨されます。`だって？
はいはい入れときゃいいんでしょ

* `vetur`をインストール


### じゃ早速`vue serve`してみるか

**＿人人人人人人人人＿**
**＞　　  Hello!　　　＜**
**￣Y^Y^Y^Y^Y^Y^Y￣**

～ 一部完 ～

# プロジェクトでも作るか
* とりあえずさっき作った作業ディレクトリ`D:\Projects\vuepro`を消して
* `D:\Projects`でコマンドを叩く

```bash
> vue create vuepro
```

## オプション選べってか
```bash
Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features
```
ま、デフォルトでいいでしょ

<details><summary>実行ログ</summary><div>

```bash
Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.3.1
✨  Creating project in D:\Projects\vuepro.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.4
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 14.19s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 4.04s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vuepro.
👉  Get started with the following commands:

 $ cd vuepro
 $ yarn serve
```
</div></details>

## 指示が出てるしその通りにするか
* `cd vuepro`これやって
* `yarn serve`これやるんだな

**＿人人人人人人人人人人人人人人人人人人人＿**
**＞　　 Welcome to Your Vue.js App　　　＜**
**￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣**

～ 二部完 ～

# GUI でプロジェクトの管理できちゃうらしい
* このコマンドを叩く

```bash
> vue ui
```

## おっなんだこれは
![Vue プロジェクトマネージャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/83c2b18e-02ed-0144-edba-28a9a22a0fb0.png)
**プロジェクトが存在しません**
どうしてなんだ...さっき作ったじゃないか

## "作成"をやってみるか
作成タブから新しいプロジェクトを作れるっぽい
![コメント 2020-04-22 131230.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/72962e31-631f-829d-0f6b-86c279b15917.png)

### 詳細
* プロジェクトフォルダは`vueapp`
* パッケージマネージャは`yarn`
* それ以外デフォルトで次へ

### プリセット
* `デフォルトプリセット`を選択
* プロジェクトを作成

### プロジェクト作成中
少しの間`プロジェクト作成中...`と表示されたあとダッシュボード画面に切り替わる

～ 三部完 ～

# じゃプロジェクトの管理でもしてみるか
各機能を見ていく
## ダッシュボード
なるほど、完全に**"理解した"**
![コメント 2020-04-22 132852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/c34cede4-fcc6-5a7e-74e4-4603246bb7fb.png)

## プラグイン
プリセットで`デフォルト`を選択すると多分この３つがインストールされるんだろうな
![コメント 2020-04-22 133208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/372626f2-2fa3-e17d-7a4d-7c19ff98c933.png)
### 試しに`Vue Router`をインストールしてみる
![コメント 2020-04-22 134013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/a9fe8af7-c196-2360-5bcd-83d683995d79.png)
![コメント 2020-04-22 134136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/517ca3fe-8e78-b267-caa5-50eee90ca4ea.png)
あー、これは楽だ。しかし楽だこれは

### 検索もできるらしい
* `＋プラグインを追加する`から検索画面へ
* インストールしたいプラグイン名を検索
* 検索結果が一覧で表示される
* インストールしたいプラグインを選択
* インストールボタン、ポチッ！ｗ

あぁ＾～簡単すぎるんじゃ＾～
![コメント 2020-04-22 134538.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/bc983438-363f-c035-3bdc-2bd02fd70869.png)

## 依存
ぶっちゃけよくわからん
とある機能を使いたいときにその機能が別の機能を呼び出してたら...みたいなイメージ
![コメント 2020-04-22 140334.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213286/1cb0c064-ffc8-4eea-1c43-04cce31151ee.png)

## 設定（めんどくせーから割愛する）

## タスク（めんどくせーから割愛する）

～ 四部完 ～