[Vue.js] Vue.js 찍먹을 위한 초기 세팅

Vue2를 레거시로 가진 회사에서 인턴을 하게 되었습니다.
인턴 시작 전 Vue2를 공부하고 세팅 정도는 문제없이 하기 위해 포스팅합니다.
대부분의 출처는 : 한시간만에 배우는 VueJS 입문 입니다.

Vue Cli로 프로젝트 생성하는 법

• npm i -g @vue/cli 로 vue cli 설치
• vue create . 으로 현재 폴더에 프로젝트 설치 (폴더 생성하며 만들려면 vue create 원하는폴더명 )
• 이후 선택창에 default (vue2/eslint) (vue3/eslint) 등 선택지 생김, 일단 첨이니까 vue2 Default로 선택
• npm run serve 하니 vue로 만든 첫 프로젝트를 만났다! ㅎㅎ
• react로 팀플 2개 돌려봤더니 vue시작이 엄청 어려울 것 같진 않다.
  • 오히려 새로운 무언가를 배울 기회라는게 재밌을 것 같다는 생각이 드네 ㅎㅎ 굳굳

Vue 2 프로젝트에 vue-router 설치하는 법

• vue3가 기준 버젼이 되어서 npm i vue-router --save를 하면 원하는대로 설치가 안된다.
• vue2 기준 가장 최근 버젼의 router는 "vue 3.5.3"이라고 한다.
• 따라서 npm i vue-router@3 --save를 하자.

bootstrap-vue

• 아래는 bootstrap vue 공식 문서에 다 나오는 내용
• npm i vue bootstrap-vue bootstrap

  // @main.js 를 아래와 같이 변경해준다. 
  import Vue from 'vue'
  import App from './App.vue'
  import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
  

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Vue.config.productionTip = false

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