[ Vue.js ] vue 이용해서 웹프로젝트 시작하기! (라우팅 / bootstrap)

Vue CLI 설치

npm install -g @vue/cli

vue cli란, vue 프로젝트를 쉽게 만들어줌으로써, 빌드나 배포하기 쉽도록 도와준다. 

 

---

 

Vue 프로젝트 생성

vue create 프로젝트명

 

 

프로젝트가 생성이 되면, 위와같은 파일들이 생긴다 

 

여기서 중요한 파일/폴더

Node_modules

프로젝트에 필요한 라이브러리등이 모여있는 곳

public

html파일이나 기타 파일을 보관하는 곳

src

모든 소스코드들이 담기는 곳

package.json

라이브러리 버전, 프로젝트 설정을 기록하는 곳

 

---

프로젝트 서버 실행

npm run serve

 

위의 명령어를 실행하면 주소가 나온다. 그 주소를 URL에 넣으면

 

위의 사진처럼 정상적으로 화면이 나오면, 성공한 것이다.

---

프로젝트에 사용될 라우터와 bootstrap을 추가로 설치

부트스트랩 설치

npm install vue bootstrap-vue bootstrap

 

main.js

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an 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)

 

 

components/layout/Header.vue

<template>
<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>

<script>
export default {
    name: "header",
}
</script>

 

 

다시 서버를 실행시켜보면,

 

상단에 NavBar가 생긴 것을 확인할 수 있다.

 

---

라우터 설치

npm install vue-router --save

 

router.js

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",
    routes: [
        { 
            path:"/",
            component: Home
        },
        {
            path:"/about",
            component: About
        }
    ]

});

export default router;

const router에 router를 설정한 것인다.

path가 "/"  = 기본 경로일 경우에는 components Home을 라우팅해라 

path가 "/about" = 경로가 about일 경우에는 About 컴포넌트를 라우팅 해라라는 의미 

 

main.js

import router from './router'

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

App.vue

 

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

적용된 router-view 태그(컴포넌트)는 라우팅 정보가 바뀌면 해당하는 뷰를 그려 다른 화면으로 전환하게 된다.

 

 

views/Home.vue

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

views/About.vue

 

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

 

URL = "localhost"

URL = "localhost/about"

라우팅 설정한 것 처럼, URL주소에 따라서 다른 컴포넌트가 배치되는 것을 확인할 수 있다.