Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
128
Help us understand the problem. What is going on with this article?
@kai_kou

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開発ライフを^^

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7

128
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kai_kou
2004年からWeb系のシステムエンジニアとして開発、運用、マネジメントを経験。現在はアイレット(クラウドパック)に所属。 べ、別にいいね貰えたからってモチベーションが上がって記事とコードの品質があがるわけじゃないんだからね///
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
128
Help us understand the problem. What is going on with this article?