Help us understand the problem. What is going on with this article?

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

kai_kou
2004年からWeb系のシステムエンジニアとして開発、運用、マネジメントを経験。現在はアイレット(クラウドパック)に所属。 べ、別にいいね貰えたからってモチベーションが上がって記事とコードの品質があがるわけじゃないんだからね///
https://twitter.com/k_aik_ou
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした