<仙台高専アドベントカレンダー2019><vue>#Vue事始

はじめに

登録してた日付を間違えて記憶した結果丸一日ずれました。 ということで仙台高専アドカレ7日目はOBです

Vueを試してみるよ

どういう経緯かは簡略に説明するとこのツイートで決めました。

f:id:poolbooyer:20191208005227p:plain
ネタに困った男の末路

ということで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で動作を確認することができるようになります。
表示される画面を確認すると以下の感じ

f:id:poolbooyer:20191208231123p:plain
アクセス時に表示される画面
これでhotloadも動くのでファイル更新すると自動で画面更新されます。 この先はまた別日で書きます。

日にち間違えててごめんなさい(土下座)