[TIL] Vue 프로젝트 연습 - 프로젝트 초기 설정

TIL

Vue 프로젝트 연습

Vue 프로젝트 연습 - 강의

vue cli 설치

npm install @vue/cli

vue2 default 설정 설치

vue create .

현재 디렉토리에 vue 프로젝트를 생성할 것이기 때문에 .으로 했다.

완료가 되면 npm run serve로 프로젝트를 로컬에서 구동할 수 있다.

초기 설정

vue-router

프로젝트에 사용하는 vue는 2버전이기 때문에 vue-router를 그냥 설치하면 오류가 난다.

npm ERR! While resolving: vue-lecture-beginner@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from vue-router@4.0.14
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"*" from the root project

따라서 router 3 버전을 설치한다.

npm install vue-router@3 --save

bootstrap vue

bootstrap vue를 사용하기로 한다.

npm install vue bootstrap-vue bootstrap

main.js에 bootstrap 관련 파일들을 import 해준다.

// Install BootstrapVue
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

구현

Vue Router

App.vue에서 router로 컨텐츠들을 나타낼 것이기 때문에 다음과 같이 router-view 컴포넌트를 넣는다.

<template>
  <div id="app">
    <Header />
    <div id="content" class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

Home과 About 컴포넌트를 생성한 후 다음과 같이 router를 생성하여 export한다.

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import About from "./views/About";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history", // mode
  routes: [
    { path: "/", component: Home }, // routing 주소와 컴포넌트
    { path: "/about", component: About },
  ],
});

export default router;

main.js 에서 router를 import 하여 Vue 인스턴스에 포함한다.

import router from "./router";

new Vue({
  router, // 정의한 router 사용 (app을 마운트할 때 router를 사용할 수 있는 구조)
  render: (h) => h(App),
}).$mount("#app");

회고 (TIL)

2022.04.12 Daily 회고

✏오늘 한 일

• Vue 코드 분석

⁉느낀 점

Vue 계속 보다보니 무슨 말인지는 대충 알 것 같은 느낌이다.
그런데 연습으로 지금 진행 중인 작업 해보았는데,
역시 하는 건 다르다.. ㅠㅠㅠ

Vue가 좀 급해졌다.
아직 React로 마이그레이션 할지 어떻게 될 지 모르기 때문에
주말에 추가적을 공부해야겠다.

Vue는 좀 규모가 있는 프로젝트를 클론이라도 빠르게 진행하거나 하면 되지 않을까 한다.

또 회의에서 하는 말들 그래도 어느 정도는 알아들을 수 있다.
히스토리를 좀 공유해주시기도 했고,
정신차리고 회의 내용을 정리하니 어떤 것들이 있는지 한 80%정도는 알아듣는 수준인 것 같다.

얼른 적응해서 나도 주도적으로 펜딩 치고 싶다!

🎃현재 나의 상태

어질어질 😵
할 게 많은데 집에 오면 9시라 눈물난다. 크흡ㅠ 😢

---