Vue.js 개발 환경 설정

참고

https://www.youtube.com/watch?v=sqH0u8wN4Rs&t=643s&ab_channel=%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9

 

개발 환경

* macOS

* pycharm professional

 

S/W 버전

* vue 2.7.16

* vue-router - 2.8.1

* bootstrap - 4.6.1

* bootstrap-vue - 2.23.1 

 

vue cli 설치

$ npm install -g @vue/cli

 

vue 테스트 프로젝트 설치

version 2로 설치한다.

$ vue create test

 

vue 서버 실행

$ cd test

$ npm run serve

 

vue router 설치

$ npm install vue-router@3 --save

vue 버전의 2.x일 경우 vue-router는 3.x 버전으로 설치한다.

 

test/src/component 폴더에서

-  layout 폴더 생성

- Header.vue 파일 추가

vue에서 부트스트랩을 사용

vue 부트스트랩 설치

vue.js에서 부트스트랩 버전 -  4.6.1 recommanded

따라서 해당 버전 설치

$ npm install bootstrap-vue bootstrap@4.6.1

 

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')

 

Header.vue 파일에 bootstrap vue, navbar 추가

<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>

 

src/views 폴더 생성

 

App.vue 편집

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

<script>
import Header from './components/layout/Header.vue'

export default {
  name: 'App',
  components: {
    Header,
  }
}
</script>

 

views/HomePage.vue 생성

<template>
  <div>
    <h1>Welcome to Home</h1>
  </div>

</template>

<script>
export  default {};
</script>

 

views/AboutPage.vue 생성

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

</template>

<script>
export  default {};
</script>

 

router.js 파일 생성

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

Vue.use(VueRouter)

// eslint-disable-next-line
const router = new VueRouter({
    mode: "history", routes: [{path: "/", component: Home}, {path: "/about", component: About}]
});

export default router

 

웹페이지 접속 시 다음과 같이 페이지 생성