<仙台高専アドベントカレンダー2019><vue>#Vue事始
はじめに
登録してた日付を間違えて記憶した結果丸一日ずれました。 ということで仙台高専アドカレ7日目はOBです
Vueを試してみるよ
どういう経緯かは簡略に説明するとこのツイートで決めました。
ということでVueを触ります。 ただ、経験ががっつりあるわけでもないので調べつつ、試しつつ、継続して記事にしていくことにします。
今回の概要
- dockerを使って開発の環境を立てる
Docker環境でVueを動かす
今回はローカルにあれこれせずDockerでなんとかやります
今回お試しでやるだけってことを考えるとDockerでよかったのですが、他に色々動かすことも多いと思うのでdocker-compose
を使用します。
ということでまずはDockerfile
# nodeのイメージを取得 FROM node WORKDIR /usr/src/app RUN apt-get update &&\ npm install -g npm @vue/cli
Nodeのimage取ってきてVue/cliを取ってくるところまでやります。
そしてdocker-compose.ymlは以下の感じ。
version: '3' services: app: build: ./docker/Vue/ ports: - 3000:3000 volumes: - ./Vue:/usr/src/app stdin_open: true tty: true
でこれをビルドして起動してコンテナ内に入ります。
そして以下の手順でコマンドを実行します。
1. vue create .
を実行
2. 開発するプロジェクトを作成する(今回はdefault,yarnを選択)
3. 構成された後yarn serve
を実行することでサービス開始
1を実行するとこんな感じに進んでいきます。
root@6352617c5535:/usr/src/app# vue create . >> 生成するディレクトリを確認します(今回はカレントディレクトリ) Vue CLI v4.1.1 ? Generate project in current directory? Yes >>構成パターンを選択(今回はプリセット) Vue CLI v4.1.1 ? Please pick a preset: default (babel, eslint) Vue CLI v4.1.1 ✨ Creating project in /usr/src/app. ⚙ Installing CLI plugins. This might take a while... yarn install v1.19.2 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.9: The platform "linux" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... success Saved lockfile. Done in 61.69s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.19.2 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.9: The platform "linux" is incompatible with this module. info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 71.52s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project app. 👉 Get started with the following commands: $ yarn serve
これでプロジェクトは完成します。
完成したプロジェクトをビルドします。
$yarn build
ビルド完了後に
$yarn serve
を実行するとlocalhostで動作を確認することができるようになります。
表示される画面を確認すると以下の感じ
これでhotloadも動くのでファイル更新すると自動で画面更新されます。
この先はまた別日で書きます。
日にち間違えててごめんなさい(土下座)