Vue3 (사이트 제작 1)

영화검색 사이트 제작

main.js

router 설치
routes폴더를 제작하여 안에 index.js를 만든다.
최초로 보여줄건 App.vue이며 라이브러리 형식으로 router를 사용 하겠다고 .use로 명시.

npm install vue-router@4

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'

createApp(App)
  .use(router)
  .mount('#app')

index.js

createRouter와 createWebHashHistory두가지 매소드를 사용하여 제작하게된다.
routes를 두어 path와 component를 지정하여 경로에 맞게끔 vue컴포넌트를 지정할수 있다.

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import About from './About'

export default createRouter ({
  // Hash
  // https://google.com/#/search
  history: createWebHashHistory(),
  // pages
  // https:// google.com
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

App.vue

App.vue에선 vue에서 제공되는 RouterView를 사용하여 페이지 바뀔때마다 app.vue가 최초시작점임으로 경로에 맞게끔 제공된다.

<template>
  <RouterView />
</template>

Bootstrap5

부트스트랩을 설치하여 준비한다.

npm i bootstrap 

설치 후, node_modoles로 경로지정해서 bootstrap을 찾아서 연결해줘야한다.
위의 import 정보들은 내가 custom 제작을 위해서 불러왔다.

main.scss

// Default variable overrides
$primary: #FDC000;

// Required 밑에는 이미 지정되어있음 그래서 위에서 지정해줌
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

// 위의 것들이 모여서 bootstrap이 만들어진다.
@import "../../node_modules/bootstrap/scss/bootstrap";

app.vue

최초의 페이지의 style에서 import로 main.scss를 불러와서 설정한다.

<template>
  <RouterView />
</template>

<style lang="scss">
  @import "~/scss/main";
</style>

모든 준비는 끝났다!