Vue3の環境を30分以内にさくっと構築したい✨

### この記事の目的
Vue3 の開発環境を 30分以内に構築する！

### 対象者
- とりあえず Vue3 が動く環境が欲しい
- 素の Vue で開発したい（Nuxt.js などのフレームワークを使用しない）
- TypeScript で開発したい

### 条件
- Docker, node は既に入っている

### それでは早速いきましょう👍

#### Step1. ローカルで適当にプロジェクト用のフォルダ掘る
```shell
% mkdir vue-otameshi
```

名前は適当で OK です。とりあえず vue-otameshi （vue お試し）で。

#### Step2. docker-compose.yml 書く
```shell
vue-otameshi % touch docker-compose.yml
```

```dockerfile:docker-compose.yml
version: "3"

services:
  setup:
    image: node:latest
    volumes:
      - .:/srv:cached
      - ~/.ssh/:/root/.ssh:ro
      - ~/.gitconfig:/root/.gitconfig
    working_dir: /srv
    command: yarn install
  app:
    image: node:latest
    ports:
      - 8080:8080
    volumes:
      - .:/srv:cached
    working_dir: /srv
    command: yarn serve
```

#### Step3. @vue/cli を install する
```shell
vue-otameshi % docker-compose run --rm setup yarn add @vue/cli
```
めちゃくちゃ時間かかりますが、少しの辛抱です。。
次のように出ていたら成功してます。

```
├─ xtend@4.0.2
├─ y18n@5.0.8
├─ yallist@4.0.0
├─ yaml-front-matter@3.4.1
├─ yargs-parser@20.2.9
├─ yargs@16.2.0
├─ yauzl@2.10.0
├─ zen-observable-ts@0.8.21
└─ zen-observable@0.8.15
Done in 691.11s.
```
691秒は長すぎる😭

#### Step4. vue プロジェクトを作成する
```shell
vue-otameshi % docker-compose run --rm app ./node_modules/.bin/vue create .
```

諸々設定入ります〜
よくわからない方はとりあえず真似すれば問題なしです！

```shell
Vue CLI v4.5.13
? Generate project in current directory? Yes

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-
sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn

Vue CLI v4.5.13
✨  Creating project in /srv.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...
```

成功したみたいです。

```shell
success Saved lockfile.
Done in 314.19s.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ yarn serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.
```

#### Step5. docker でサーバーを起動する

```shell
vue-otameshi % docker-compose up app
```

```shell
Starting vue-with-tailwind-css-practice_app_1 ... done
Attaching to vue-with-tailwind-css-practice_app_1
app_1    | yarn run v1.22.4
app_1    | $ vue-cli-service serve
app_1    |  INFO  Starting development server...
.
.
.
app_1    |  DONE  Compiled successfully in 22128ms1:49:35 PM
app_1    | 
app_1    | 
 [webpack.Progress] 100% 
app_1    | 
app_1    | 
app_1    |   App running at:
app_1    |   - Local:   http://localhost:8080/ 
app_1    | 
app_1    |   It seems you are running Vue CLI inside a container.
app_1    |   Access the dev server via http://localhost:<your container's external mapped port>/
app_1    | 
app_1    |   Note that the development build is not optimized.
app_1    |   To create a production build, run yarn build.
app_1    | 
app_1    | No issues found.
```

起動完了✨
localhost:8080 に例の画面が出てきたら OK です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798385/dfca1002-c342-5197-7907-b43be7107adf.png)

お疲れ様です。
見ていただきありがとうございました🙇‍♂️