vuejs+bootstrap+docker-compose による環境構築 vuejs
<p>vuejs+bootstrap+docker-compose による環境構築
ポイントは現時点（2022/03）では、Bootstrap-vueはVue3に対応してないみたいで
いろいろ設定が別途必要になりそうなので今回はvue2 を採用した
最初はvue3で構築をこころみて、画面真っ白になり挫折...
1. アプリ作成
# vue create app1
※この後、選択でvue2 を選択する
2. ポート番号を指定する場合 app1/vue.config.js の編集
const { defineConfig } = require('@vue/cli-service')
module.exports = {
devServer: {
port: 9005
host: '0.0.0.0'
}
};
※↑ここのportは、docker-compose で指定した、port番号とあわせないといけない
ports:
- 9005:9005
3. bootstrap-vue をいれる
# vue add bootstrap-vue
4. 起動
# cd app1
# yarn serve
5. bootstrap用タグをいれてみる
src/componets/HelloWorld.vue にいれる
<b-button variant="secondary">Secondary</b-button><br />
<b-button variant="success">Success</b-button><br />
<b-button variant="danger">Danger</b-button><br />
<b-button variant="warning">Warning</b-button><br />
6. ブラウザからアクセス
http://localhost:9005/
おしまい
補足1 docker-compose.yml
---------------
version: '3'
services:
vuejsdemo:
container_name: "vuejsdemo"
build: .
ports:
- 9005:9005
volumes:
- ./app:/usr/src/app
tty: true
stdin_open: true
command: /bin/bash
---------------
補足2 Dockerfile
---------------
FROM node:14-buster-slim
WORKDIR /usr/src/app
RUN npm install --global @vue/cli
---------------
</p>