vue3+bootstrap5

크롬 웹스토어
vue.js devtools 검색

vscode 플러그인
vetur은 뷰2용이라서 아래설치시 비활성화
volar 볼라(뷰3용)
vue vscode snippets
----------------------
npm init  vue@latest

project name: learn-vue3
jslint ok
프리티어 ok

라우터와
피니아 둘다 직접 설치할꺼기때문에 저기까지만 설치

npm install
npm run dev

components>icons> 안에 파일 안쓰는거 삭제
base.css 삭제
app.vue 임포트 된거랑 안에 내용 지우고 정리

v-bind 축약형 
v-bind:title="aaTitle"
:title="aaTitle"

-------------------
!!!!뷰에 부트스트랩 설치
npm install bootstrap

main.js파일에
import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap.js';


docs>components>navbar
https://getbootstrap.com/docs/5.3/components/navbar/

카드 사이의 간격
gx-5 거터 가로
gy-5 거터 세로
g-5 위 옆

뷰티파이vs부트스트랩vs퀘이사 트렌드
https://npmtrends.com/bootstrap-vue-vs-quasar-vs-vuetify

스닛핏 설치snippet
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
vbase3

##전역컴퍼넌트 만들기
main.js에
const app = createApp(App)

app.component('AppCard', AppCard) //전역
app.mount('#app')

전역으로 하면 편하긴한데 위치찾기 힘들어서 그냥 해당하는곳에 찾아서 각각 컴퍼넌트 만들기