vs code + spring boot + vue.js 설치 가이드 (4) - 부트스트랩

2020. 11. 19. 16:22· 개발
목차
  1. 개요
  2. 설치
  3. 예제
  4. 가이드
  5.  
  6.  
  7. References

개요

부트스트랩을 사용해본다.

 

설치

부트스트랩 설치

npm install bootstrap-vue bootstrap --save

설치하다가 뭐 제대로 안됐다고 나와서 터미널에 나오는 가이드대로 다시 설치해보았다

npm install jquery@1.9.1
npm audit
npm audit fix
npm audit fix --force
npm install bootstrap-vue bootstrap --save

 

/src/frontend/src/main.js 에 부트스트랩 관련 내용을 추가한다.

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)


Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

설치 완료!

예제

예시로 하나 만들어 보려고 한다.

/src/frontend/src/components/Main.vue 파일 추가

<template>
  <div class="main">
    <h3 class="mb-5">{{ msg }}</h3> 
    <b-tabs content-class="mt-5" align="center">

        <b-tab title="Search" active>
            <b-form @submit="onSubmit" @reset="onReset" v-if="show" class="ml-5 mr-5">
                <label for="tags-basic">Enter tags separated by space, comma or semicolon</label>
                <b-form-tags 
                    input-id="tags-basic" 
                    :input-attrs="{ 'aria-describedby': 'tags-remove-on-delete-help' }"
                    v-model="tags"
                    separator=" ,;"
                    remove-on-delete
                    no-add-on-enter
                    tag-variant="light"
                    tag-pills
                    size="lg"
                    >
                </b-form-tags>
                <b-form-text id="tags-remove-on-delete-help" class="mt-2 mb-4">
                    Press <kbd>Backspace</kbd> to remove the last tag entered
                </b-form-text>
                <b-button type="submit" variant="primary" class="mr-10" size="lg" >Search</b-button>
            </b-form>
        </b-tab>

        <b-tab title="View Tags">
            <b-form-tags v-model="tags" no-outer-focus class="mb-2">
                <template v-slot="{ inputAttrs, inputHandlers, tagVariant, addTag, removeTag }">
                    <b-input-group class="mb-2">
                        <b-form-input
                            v-bind="inputAttrs"
                            v-on="inputHandlers"
                            placeholder="New tag - Press enter to add"
                            class="form-control"
                        ></b-form-input>
                        <b-input-group-append>
                            <b-button @click="addTag()" variant="dark">Add</b-button>
                        </b-input-group-append>
                    </b-input-group>
                    <div class="d-inline-block" style="font-size: 1.5rem;">
                        <b-form-tag
                            v-for="tag in tags"
                            @remove="removeTag(tag)"
                            :key="tag"
                            :title="tag"
                            :variant="tagVariant"
                            class="mr-1"
                        >{{ tag }}</b-form-tag>
                    </div>
                </template>
            </b-form-tags>
        </b-tab>
        <b-tab title="Recent Comments" disabled><p>I'm a disabled tab!</p></b-tab>
    </b-tabs>
        
  </div>
</template>

<script>
export default {
  name: 'Main',
  props: {
    msg: String
  },
  data() {
      return {
        tags: [],
        show: true
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        alert(JSON.stringify(this.tags))
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

/frontend/src/App.vue

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Main from './components/Main.vue'
import request from "request"

export default {
  name: 'App',
  components: {
    Main
  },
  mounted() {
    request('http://localhost:8090/api/hello', function(error, response, body) {
      window.console.log('error: ', error);
      window.console.log('statusCode: ', response && response.statusCode);
      window.console.log('body: ', body);
    });
  }
}
</script>

실행해보면 다음과 같이 나온다.

 

쨘

 

가이드

가이드는 아래 사이트에서 볼 수 있다.

bootstrap-vue.org/docs

 

BootstrapVue

Quickly integrate Bootstrap v4 components with Vue.js

bootstrap-vue.org

 

 

References

imasoftwareengineer.tistory.com/42

 

 

728x90
반응형

'개발' 카테고리의 다른 글

vue.js range slider 사용하기  (0) 2020.12.08
vs code + spring boot + vue.js JRE, JDK 버전 다른 환경에서 오류  (0) 2020.11.26
vs code + spring boot + vue.js 설치 가이드 (3) - 프록시 설정  (0) 2020.11.19
vs code + spring boot + vue.js 설치 가이드 (2)  (0) 2020.11.19
vs code + spring boot + vue.js 설치 가이드(1)  (0) 2020.11.18
  1. 개요
  2. 설치
  3. 예제
  4. 가이드
  5.  
  6.  
  7. References
'개발' 카테고리의 다른 글
  • vue.js range slider 사용하기
  • vs code + spring boot + vue.js JRE, JDK 버전 다른 환경에서 오류
  • vs code + spring boot + vue.js 설치 가이드 (3) - 프록시 설정
  • vs code + spring boot + vue.js 설치 가이드 (2)
내공얌냠
내공얌냠
내공냠냠
내공얌냠
내공냠냠
내공얌냠
전체
오늘
어제
  • 분류 전체보기 (254)
    • 개발 (113)
      • mediapipe (16)
      • insightface (5)
      • JongjuAR (3)
    • 자료구조 알고리즘 (79)
      • 코딩테스트 (64)
      • 이론 (15)
    • 공부 (7)
      • 단행본 (7)
      • 튜토리얼 (19)
      • 논문 (15)
      • 복기 (5)
    • 참여 (5)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • postgresql 재설치
  • flutter tutorial
  • python telegrambot
  • 구글 미디어파이프
  • flutter
  • 컴퓨터 비전 기초
  • flutter conference
  • flutter 행사
  • git tutorial
  • flutter 행사 후기
  • google mediapipe
  • mediapipe
  • 플러터
  • 음성인식 튜토리얼
  • 컴퓨터 비전 책 추천
  • 깃 튜토리얼
  • vscode 스프링 설치
  • 컴퓨터 비전
  • kubeflow설치안됨
  • postgresql install in mac
  • 미디어파이프
  • ios google places api
  • speaker adaptation tts
  • 딥러닝 기반 음성인식 기초
  • 머신러닝이란
  • mediapipe translate
  • 플러터 튜토리얼
  • kubeflow설치가이드
  • 음성인식 기초
  • torchscript vs onnx vs tensorrt

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
내공얌냠
vs code + spring boot + vue.js 설치 가이드 (4) - 부트스트랩
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.