1) vue 시작의 시작

July 14, 2021

간단하게 뷰를 테스트 해보기 위한 시작 방법

폴더 세팅

새 폴더를 만들고 index.html, main.js 파일을 만든다. index.html에 main.js 연결한다. 루트폴더에 src폴더 만들고 그 안에 main.js 넣었다.

<script src="./src/main.js"></script>

vscode에서 터미널 열거나, 아무튼 터미널에서

$ npm init -y

package.json이 만들어진다.

번들러를 설치해야 한다. webpack 좋지만 설정할 것이 너무 많다고 한다. 초보자 도망갈 수도 있기 때문에 가볍게 시작하기 좋은 parcel을 설치한다.

패키지를 설치할 때는 개발용, 제품용 구분해서 설치하는데 번들러는 개발용으로 사용하기 때문에 -D 옵션을 붙여서 설치한다.

$ npm i -D parcel-bundler

package.json에 봐서 devDependencies 안에 parcel이 있으면 잘 된 것.

"devDependencies": {
  "parcel-bundler": "^1.12.5",
},

첫 번째 방법, npm un parcel-bundler로 삭제하고 다시 깐다. 두 번째 방법, package.json에서 parcel부분 지우고 npm i를 하면 없는 건 자동으로 삭제된다고 한다.

실행할 명령을 만든다. package.json에 “scripts”부분을 보면 기본으로 테스트 어쩌구가 있는데 지운다. 그리고 parcel 번들러의 진입점을 설정한다.

"scripts": {
  "dev": "parcel index.html"
},

run은 scripts안에 적힌 명령을 동작시킨다.

$ npm run dev
...
Server running at http://localhost:1234 

서버가 저 로컬호스트 주소에서 돌아가고 있다고 뜬다. index.html파일 수정해 보면 바로 적용되는 것을 확인할 수 있다. control + c 로 중단.

2버전을 설치하기 위해 @2가 붙는다.

$ npm i vue@2

비교적 최신 문법인 async await를 사용하려면 regenerator-runtime을 설치해야 한다.

$ npm i regenerator-runtime

main.js에서 사용하기 위해 불러온다.

import 'regenerator-runtime'

vue 공식 문서를 읽어 가면서 나오는 주요 개념들. 바로 이해가 다 되는 것이 아니라 나중에 검색해 봐야 하는 리스트.