02. Vue - router

1. router > index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

 - routes name은 동일값 가지면 안됨. 

 - component 설정

   > 위 import로 컴포넌트하면 컴파일시 app.js로 들어감.

   > webpackCunkName에 지정한 값으로 컴파일시 js 파일 이름이 됨. (network 확인시 어떤 js 파일이름으로 불러오는지 보면 됨.)

   > /* webpackChunkName: "about", webpackPrefetch:true */ 하면 네트워크에서 size 부분이 prefetch cache로 바뀜.

      당장 쓸 리소스는 아니고 근래에 쓸거 같은 리소스는 cache에 저장해두는 형식. (사용자 입장에서 더 빠르게 느낌)

      false 하면 하단 link 테그가 없어지고 누른 순간에 js 파일을 서버에서 받아옴.

 

2. .prettierrc 파일 생성, package.json 설정

{
    "semi" : false,
    "bracketSpacing" : true,
    "singleQuote" : true,
    "useTabs" : false,
    "trailingComma" : "none",
    "printWidth" : 80
}

 - 해당 부분에서 lint 설정함.

 - 스탠다드 설정은 function () 이런식으로 한칸을 띄어줘야 함. 해당 규칙을 off 시킴.