こんにちは！今回はプログラミングネタです。
Vue CLIを使用して新規プロジェクトを作成する手順に関して、
サンプルプログラムを用いて解説したいと思います。
動作環境
以下の環境で動作するサンプルを紹介します。
- Node: 14.15.0
- Vue CLI: 4.5.8
事前準備
事前準備として、docker-compose.yaml と Dockerfile を準備します。
以下がサンプルファイルです。
docker-compose.yaml
version: '3'
services:
sample-front:
build: <path-to-dockerfile>
container_name: sample-front
tty: true
volumes:
- ./../sample-front/:/app
ports:
- "8080:8080"Dockerfile
FROM node:14.15.0-alpine3.12
ENV VUE_CLI_VERSION 4.5.8
RUN yarn global add @vue/cli@${VUE_CLI_VERSION}
WORKDIR /appコンテナ立ち上げ
以下のコマンドでコンテナを立ち上げます。
$ docker-compose upコンテナが立ち上がっているかどうかは以下のコマンドで確認できます。
$ docker psインストールした項目のversion確認(スキップ可)
実際にコンテナに入ってDockerfileで指定した項目がインストールされているか確認します。
以下のコマンドでコンテナに入ります。
$ docker exec -it sample-front ashインストールしたものを確認していきます。
$ node -v
v14.15.0
$ vue --version
@vue/cli 4.5.8NodeやVue CLIのバージョンは指定したものがインストールされていることが確認できました！
プロジェクト作成
いよいよプロジェクト作成に取り掛かります。
今回はカレントディレクトリにプロジェクトを作成するので以下のコマンドを使用します。
vue create .カレントに作らない場合は、以下のコマンドを使用します。そうすると指定した名前のディレクトリ配下にプロジェクトが作成されます。
vue create <app-name>次にプロジェクトの設定を選択します。
今回自分はVue 3とYarnを選択しましたが、こちらはお好みで変更可能です。
Vue CLI v4.5.8
? Generate project in current directory? (Y/n) -> Y
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM設定項目を選択しばらく待ちます…
🎉 Successfully created project app.
👉 Get started with the following commands:
$ yarn serveプロジェクトの作成に成功した様です！
サーバーを立ち上げて確認
さて最後にサーバーを立ち上げて確認してみます。docker-compose.yamlに以下の記述を追加します。
command: >
ash -c "yarn install &&
yarn serve"実際に立ち上げてみます。
$ docker-compose up
sample-front | App running at:
sample-front | - Local: http://localhost:8080/ブラウザで以下のURLを叩いて確認してみると…
http://localhost:8080/以下の画像の様に表示されていたら成功です！お疲れ様でした。
↓Vue.jsの勉強には以下の本がわかりやすかったです
↓Dockerの勉強には以下の本がわかりやすかったです
コメント