Vue 환경설정 정리

HR.lee·2022년 5월 3일
vue
0

Vue

목록 보기
1/1

뷰라는 새로운 프레임워크를 배우며 시작전 간편하게 환경설정을 기록하기로 했다.

  1. Vue.js도 자바스크립트 기반이니까 node를 설치해 준다.
  2. Vue 관련 확장 프로그램으로 Vetur랑 관련 snippet을 깔아준다.

2. create-react-app과 비슷한 역할을 하는 Vue CLI를 터미널로 설치해준다.

npm install -g @vue/cli

이 때, window는 git bash에서 명령어를 마이그레이션하기 위해
C:\Program Files\Git\etc\profile.d 경로의 
aliases.sh 파일을 열어서

alias vue='winpty vue.cmd’

구문을 추가해준다.

3. 프로젝트를 생성해준다. 뷰는 프리셋을 잘 지원해준다.

vue create [프로젝트 이름]

선택할 수 있는 것.
yarn vs npm
Vue2 vs Vue3
ESlint 관련 설정(프리티어 쓸건지 안쓸건지 등)
저장시 lint vs 커밋시 lint
vueRouter / vueX 초기 세팅 기능

설정할수 있는게 많아서 좋다.
프리셋 저장도 가능하다.
특히나 vueRouter는 Vue버전하고 호환되는 버전으로 깔아야 작동하기 때문에 여기서 추가하는 것을 추천한다.

내 설정 저장
yarn / Vue2 / ESlint with prettier / lint on save
vueRouter / vueX

4. Vuetify 설치

yarn add eslint-plugin-vuetify -D

구글 머테리얼 디자인 스펙을 기반으로 제작된 뷰 특화 UI 프레임워크, 부트스트랩과 비슷하지만 반응형 지원이 좀더 잘되고 커스텀 가능한 옵션이 많다.

5. .eslintrc.js vuetify 호환되는 버전으로 수정

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
  },
};

6. Vue에서 주의해야 할 점

> - Vue의 스타일가이드를 잘 지키자.

  • 컴포넌트의 이름은 무조건 파스칼케이스 2글자이다!
    react는 html 예약어와의 혼동을 피하기 위해 JSX문법을 선택했고 Vue는 multi-word 규칙을 강력하게 권장하고 있다.

  • html 내부에서 사용되는 옵션, 주소값 등은 무조건 케밥케이스이다! (스네이크 케이스 _, 케밥케이스 -)

    • 이 때 규칙을 잘 지켜서 이름을 쓰면 호환이 된다.
      (마법... AppleCard하고 apple-card가 호환이 된다는 얘기)

    • html은 template 태그 안에

    • data 관련 모든 js, import, export는 script 태그 안에

      • 이 때 data안에는 state가 들어간다. data는 함수형으로 작성하며 화살표함수로 작성해도 괜찮음
      • 이 때 연산이 들어가는 데이터는 computed: 작성해서 밑에
      • function은 methods: 작성해서 밑에
      • lifecycle hooks는 각 단계별로 밑에 함수형으로 추가

    • CSS 관련은 style 태그 안에

> Vue의 데이터 흐름을 이해하자.

  • Vue에서 객체 내의 프로퍼티를 수정하고 수정사항이 바로 반영되게 하고 싶으면 Set을 사용해야 한다. 자바스크립트의 특성상 얕은 복사는 주소값만 참조하고 객체 내부의 값의 변동에 대해선 무관심하기 때문이다.
  • Vue나 React에서 깊은 복사를 하고 싶다면 슬라이스, 맵, 혹은 스프레드 연산자를 단계별로 사용해주거나(얘들은 깊은 복사같은 얕은 복사) lodash등의 외부 라이브러리를 사용해야 한다! 'cloneDeep()'

> Vue만이 가지고 있는 Vue 문법을 배우자!

  • 공식문서가 무척 잘되어 있어서(한글화까지 되어있어서) 고민이 적다. 초보자라면 14개의 디렉티브부터 시작하면 된다.

  • 각 문법은 html에 바인딩하는 형태로 사용하는데 v-가 앞에 붙는 것이 특징이고 자주 쓰는 문법의 경우 축약형을 제공한다.
    - v-bind의 경우 :
    - v-on의 경우 @

  • v-for에는 유니크한 key가 꼭 필요하다.

  • v-text와 v-html의 차이를 알아두자.

  • v-if와 v-show의 차이를 알아두자.

profile
HR.lee
It's an adventure time!

0개의 댓글