[영화 검색 사이트] Vue Router, Bootstrap 구성

https://router.vuejs.org/

Vue Router

 

vue router 설치

npm install vue-router@4

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

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

// index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './HomeVue'
import About from './AboutVue'

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

// App.vue
<template>
  <RouterView />
</template>

 

 

bootstrap 설치

npm i bootstrap@5.3.0-alpha1

// 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/variables-dark";
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

@import "../../node_modules/bootstrap/scss/bootstrap";