Edited at

DockerでVue.js+TypeScript開発環境を構築する

More than 1 year has passed since last update.


概要

Docker上でVue.jsの開発ができるようにする手順です。

Vue-Cliでプロジェクト作成する場合、TypeScriptやSCSS、Vuexなどを追加できるので便利です。

GitHubのリポジトリにUPしていますので、興味のある方はご参照ください。

https://github.com/kai-kou/vue-js-typescript-on-docker


手順


Dockerファイルの作成

> mkdir 任意のディレクトリ

> cd 任意のディレクトリ
> vi Dockerfile
> vi docker-compose.yml


Dockerfile

FROM node:10.8.0-stretch

RUN npm install --global @vue/cli

WORKDIR /projects



docker-compose.yml

version: '3'

services:
app:
build: .
ports:
- "8080:8080"
volumes:
- ".:/projects"
tty: true


設定ファイルが準備できたらDockerコンテナを作成・実行して入ります。

> docker-compose up -d

> docker-compose exec app bash


Vueアプリの作成

vue create コマンドを実行するとPlease pick a preset と聞かれますので、Manually select features を選択して、必要なものを指定します。

ここではすべての機能を選択、設問は初期選択のままとしました。


コンテナ内

> vue create app

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? 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): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM


ライブラリなどのインストールもされますので、環境によってはだいぶ時間がかかります。

お茶でも飲んで、まったりしながらお待ちください🍵


動作確認

プロジェクトが用意できたら、立ち上げてブラウザからアクセスしてみます。


コンテナ内

> cd app

> yarn serve

> open http://localhost:8080

やったぜ。

それでは良きVue.js開発ライフを^^

Vue.js+TypeScriptで開発するときの参考記事まとめ

https://qiita.com/kai_kou/items/19b494a41023d84bacc7