Vue.js_DAY2

DAY1 추가

• <template> 태그로 컴포넌트를 만들 수도 있다.

vue-router

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import HelloWorld from './components/HelloWorld.vue';

Vue.use(VueRouter);
Vue.config.productionTip = false;

const routes = [
  { path: '', component: HelloWorld, }
]

const router = new VueRouter({
  mode: 'history',
  routes,
});

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

• vue-router를 설치하고, 이렇게 실행하면 routes에 설정해둔 경로대로 라우팅을 설정할 수 있다.

<style>
@import '../src/assets/css/main.css'
</style>

• 이렇게 써주면 외부 css 파일도 import가 가능하다.

// TopMenu.vue
<router-link to='vue_insert' class="navbar-brand">
  VUE_INSERT
</router-link>

// App.vue
<router-view>

</router-view>

// main.js
const routes = [
  { path: '/vue_hello', component: HelloWorld, },
  { path: '/vue_insert', component: Insert, }
]

• router-link로 링크를 지정해주면, main.js에서 루트를 보고, router-view로 설정된 자리에 랜더해준다.