[TIL] 20211026 vue 프로젝트 / 깃플로우/ 비동기 컴포넌트 등

▶ vue3

뷰 프로젝트를 커스텀으로 CLI로 만들기

https://velog.io/@kdeun1/Vue-3-Composition-API-TypeScript-Vuex-4로-프로젝트-구성하기

▶ git flow

깃 플로우에 대해서

https://gist.github.com/ihoneymon/a28138ee5309c73e94f9

▶ git flow

터미널에서 깃 플로우 사용하기

프로젝트 할 때는 깃 크라켄으로 아주 쉽게 사용했는데 이제 깃 크라켄을 못쓰니까 터미널로 하는 법을 배웠다.

-- 새 기능 시작

-- 기능 완료

https://k39335.tistory.com/82

[Git] Gitflow로 branch를 관리하자!!

 

▶ lazy load(비동기 컴포넌트)

라우터 설정할 때 한번에 컴포넌트들을 다 불러오는 것이 아니라 이동했을 때 불러오는 법

//vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch'); //prefetch 삭제
  }
}
//한꺼번에 파일을 가져오지 않고 이동하면 그때서야 파일이 로딩됨



//router/index.ts
{
    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", webpackPrefetch:true */ '../views/About.vue'),
  },

//바로 접근할 가능성이 높으면 이렇게 먼저 올려놓기

 

▶ ESLINT AUTOFIX

저장할 때 마다 eslint가 자동으로 프리티어를 맞춰주는 것

preference → settings.json

{
    "eslint.validate": [ "vue", "html", "javascript"],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

 

 

▶ scss 에러

scss 가 파싱이 안된다면 모듈을 하나 더 설치해주자

https://wotres.tistory.com/entry/vue-error-해결법-PostCSS-received-undefined-instead-of-CSS-string