vue cli를 설치하고, vue create명령어를 통해 프로젝트를 생성하였다.
vue2사용을 권장하길래 vue2를 선택해 진행하였더니 일단 프로젝트가 생성이되어 보일러 플레이트가 만들어졌다.
그런데 진행하다보니 eslintrc라는 파일도 없고, 뭔가 계속 진행하기 어려워보여 다시 프로젝트를 생성하기로 하고 다시 vue ctreate 를 진행하였다.
뭔가 더보기 같은 선택창이 보였다.
Manually select features를 선택해 보니 강의와 동일한 화면이 나왔다.
해당 화면에서 babel과 Linter, Unit을 선택하고 나머지도 강의와 동일하게 진행해주었다.
설치 하다 보면 node버전을 수정하라는 메세지가 나오게된다.
node버전을 nvm이라는 노드 버전 메니저를 사용해 버전을 변경하면 성공적으로 강의와 동일한 프로젝트를 생성할 수 있다.
쓰지 않은 변수가 있을경우 바로 브라우저화면전체에 에러를 보여준다.
해당 에러는 eslint에러로 보여진다.
이것을 오버레이 라고 하는데, 이렇게되면 화면 전체를 가리기 때문에 작업 진행이 어렵다.
따라서 서버가 돌아갈때 화면을 덮는 오버레이를 vue.config.js에 설정을 추가해 꺼준다.
강의와는 다르게 devServer:{ overlay: false} 가 적용되지 않았다.
찾아보니 devServer 속성에 client라는 속성이 있고, 그 안에 overlay속성이 들어있었다.
따라서 devServer: { client: { overlay: true } } 로 바꾸어 진행하였다.
{
// 한 줄이 이 글자수를 넘게 되면 들여쓰기되어 코드가 세로로 정리된다. (default: 80)
"printWidth": 80,
// 탭 너비 (default: 2)
"tabWidth":23,
// 탭 사용 여부. 참이면 탭이있는 줄을 들여 쓰기 한다. (default: false)
"useTabs": false,
// 세미클론 강제 여부 (default: true)
"semi": true,
// 홑따옴표를 쓸건지 설정. 기본값은 쌍따옴표. 코딩을 하면서 홑따옴표를 썼다면 강제로 쌍따옴표로 변경. (default: false)
"singleQuote": true,
/*
객체, 배열, 함수 등의 후행에 쉼표를 찍을지 제어
"none" - 쉼표를 붙히지 않음
"es5" - ES5에서 유효한 후행 쉼표 붙힘 (객체, 배열 등)
"all" - 가능하면 후행 쉼표를 붙힘 (함수 인수)
*/
"trailingComma": "all",
// 단독 화살표 함수의 매개 변수 주위에 괄호를 자동으로 붙힘 (default: 'avoid')
"arrowParens": "avoid",
}