この記事の目的
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 です。
お疲れ様です。
見ていただきありがとうございました🙇♂️