뷰라는 새로운 프레임워크를 배우며 시작전 간편하게 환경설정을 기록하기로 했다.
npm install -g @vue/cli
이 때, window는 git bash에서 명령어를 마이그레이션하기 위해
C:\Program Files\Git\etc\profile.d 경로의
aliases.sh
파일을 열어서
alias vue='winpty vue.cmd’
구문을 추가해준다.
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
yarn add eslint-plugin-vuetify -D
구글 머테리얼 디자인 스펙을 기반으로 제작된 뷰 특화 UI 프레임워크, 부트스트랩과 비슷하지만 반응형 지원이 좀더 잘되고 커스텀 가능한 옵션이 많다.
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",
},
],
},
};
컴포넌트의 이름은 무조건 파스칼케이스 2글자이다!
react는 html 예약어와의 혼동을 피하기 위해 JSX문법을 선택했고 Vue는 multi-word 규칙을 강력하게 권장하고 있다.
html 내부에서 사용되는 옵션, 주소값 등은 무조건 케밥케이스이다! (스네이크 케이스 _, 케밥케이스 -)
이 때 규칙을 잘 지켜서 이름을 쓰면 호환이 된다.
(마법... AppleCard하고 apple-card가 호환이 된다는 얘기)
html은 template 태그 안에
data 관련 모든 js, import, export는 script 태그 안에
CSS 관련은 style 태그 안에
공식문서가 무척 잘되어 있어서(한글화까지 되어있어서) 고민이 적다. 초보자라면 14개의 디렉티브부터 시작하면 된다.
각 문법은 html에 바인딩하는 형태로 사용하는데 v-가 앞에 붙는 것이 특징이고 자주 쓰는 문법의 경우 축약형을 제공한다.
- v-bind의 경우 :
- v-on의 경우 @
v-for에는 유니크한 key가 꼭 필요하다.
v-text와 v-html의 차이를 알아두자.
v-if와 v-show의 차이를 알아두자.