[vue.js] vue-router 설치

• vue-router 는 url 주소에 대한 navigator 역할을 하는 중요 라이브러리이다.

참고 사이트 : https://router.vuejs.org/kr/installation.html

1. npm 을 사용한 vue-router 설치

• 명령어

npm install vue-router --save

2. router 관련 vue 파일 생성

• src 폴더 내 router 폴더를 생성

• router 폴더 내 index.js 파일을 생성

• 아래 코드를 통해 router 를 추가한다.

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  ​
  Vue.use(VueRouter)
  ​
  const router = new VueRouter({
    mode: 'history',
    routes: [
      { 
        path: '/', 
        component: Home,
        beforeEnter: requireAuth
      },
      { 
        path: '*', 
        component: NotFound 
      }
    ]
  })
  ​
  export default router

3. main.js 내 vue-router 관련 코드 추가

• main.js 파일 내

  • import router from './router'

  • Vue 클래스 내 router 추가

• 예제

  import Vue from 'vue'
  import './plugins/vuetify'
  import './plugins/vuetify'
  import App from './App.vue'
  import 'roboto-fontface/css/roboto/roboto-fontface.css'
  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  import router from './router'
  ​
  Vue.config.productionTip = false
  ​
  new Vue({
    render: h => h(App),
    router
  }).$mount('#app')

4. App.vue 내 router

• App.vue 코드에서 주소별 다르게 나와야 하는 위치에 아래 코드 추가

  • <router-view></router-view>

[Vue.js] Vuetify 설치 및 튜토리얼 학습

[Vue.js] Vuetify 설치 및 튜토리얼 학습1. vuetify 사전 세팅2. vue-cli 를 활용한 프로젝트 생성3. 생성된 프로젝트 확인4. 프로젝트 내 vuetify 패키지 설치 및 vuetify 기반 프로젝트 확인

참고 사이트 : https://vuetifyjs.com/ko/getting-started/quick-start

1. vuetify 사전 세팅

• npm 패키지 툴을 활용하여 vue-cli 를 설치한다.

  $npm install -g @vue/cli
  

   

2. vue-cli 를 활용한 프로젝트 생성

• test-app 프로젝트 생성

  $ vue create test-app
  

   

3. 생성된 프로젝트 확인

• vue-cli 기반으로 생성된 vue.js 프로젝트의 구동을 확인

  (아직 vuetify 가 설치된 단계는 아님)

  $ cd my-app
  $ npm run serve
  

• http://localhost:8080/ 로 접속하여 서버 구동 상태 확인

4. 프로젝트 내 vuetify 패키지 설치 및 vuetify 기반 프로젝트 확인

• 프로젝트 디렉토리 내에서 vue-cli로 vuetify 패키지를 추가

  $ vue add vuetify
  $ npm run serve