docker-compose를 사용하여 bootstrap-vue를 넣어보십시오.

3874 단어 docker-compose

bootstrap-vue 설치



front/Dockerfile
FROM node:14.15.4-alpine3.10

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update
COPY package.json .
RUN npm install -g npm @vue/cli

+ RUN npm install vue bootstrap-vue bootstrap

터미널
$ docker-compose up -d
$ docker-compose ps
     Name                    Command               State                 Ports              
--------------------------------------------------------------------------------------------
****_db_1      docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp, 33060/tcp
****_front_1   docker-entrypoint.sh npm r ...   Up      0.0.0.0:8080->8080/tcp           
****_web_1     bundle exec rails s -p 300 ...   Up      0.0.0.0:3000->3000/tcp    

$ docker-compose run front sh
/app # vue -V
@vue/cli 4.5.11
/app # node -v
v14.15.4
/app # vue add bootstrap-vue
...
? Use babel/polyfill? No
...
✔  Successfully invoked generator for plugin: vue-cli-plugin-bootstrap-vue
/app # exit

올바르게 설치되었는지 확인



front/src/components/HelloWorld.vue
...
    </ul>
    <b-button variant="primary">Primary</b-button>
    <b-button variant="secondary">Secondary</b-button>
    <b-button variant="success">Success</b-button>
    <b-button variant="danger">Danger</b-button>
    <b-button variant="warning">Warning</b-button>
    <b-button variant="info">Info</b-button>
    <b-button variant="light">Light</b-button>
    <b-button variant="dark">Dark</b-button>
  </div>
</template>
...
localhost:8080

참고 사이트



· htps : // 암암 도금. 하테나아 ry. jp/엔트리/2020/01/03/235700

좋은 웹페이지 즐겨찾기