この記事の目的

Vue3 の開発環境を 30分以内に構築する！

対象者

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

条件

Docker, node は既に入っている

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

Step1. ローカルで適当にプロジェクト用のフォルダ掘る

% mkdir vue-otameshi

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

Step2. docker-compose.yml 書く

vue-otameshi % touch docker-compose.yml

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 する

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 プロジェクトを作成する

vue-otameshi % docker-compose run --rm app ./node_modules/.bin/vue create .

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

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...

成功したみたいです。

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 でサーバーを起動する

vue-otameshi % docker-compose up app

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    | <s> [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 です。

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