vue/cli 3.X 버전은 기본적으로 node.js 최신 버전 중, stable 버전으로 설치되어 있어야 한다.
– nodejs.org에서 LTS 버전을 다운받아 설치한다.
– 기존에 설치된 것이 있다면 node -v(10.X 이상), npm -v(6.X 이상) 버전인지 확인
– 아니라면, node.js를 설치를 삭제하고 다시 새로 설치하거나, n을 사용해서 업데이트
위의 준비가 다 되었다면 아래와 같이 실행
- cmd 창을 열고
- 아래와 같이 2개의 npm 설치를 -g(글로벌) 로 한다.
– npm install -g @vue/cli– npm install -g @vue/cli-service-global - vue 버전 확인
– vue –version
@vue/cli 4.0.4
(이제 커맨드 창에서 vue 프로젝트를 쉽게 생성할 수 있다) - 프로젝트를 생성하고자 하는 폴더로 이동을 하고, 프로젝트를 설정한다.
– cd /dev/workspace/testdemovue
– vue create “프로젝트명”
– 설치된 폴더와 파일들은 아래와 같다.
(경로: /dev/workspace/testdemovue/”프로젝트명”/)
- /node_modules
- /public
- /src
- .gitignore
- babel.config.js
- package.json
- package-lock.json
- README.md
이제 경로 그대로 유지한 상태로 사이트를 구동해 본다. (http://localhost:8080)
npm run serve
개발 이슈 해결
1. console.log 가 작동하지 않을 경우
package.json 에서 eslintConfig > rules에 아래 내용 추가
“no-console”: 0
2. npm run serve 옵션
서비스 포트 변경이나 자동 오픈 설정
{
"name": "quiz",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
}
scripts 옵션 설명
–open: npm run serve 로 서버 시작시 브라우저 자동 실행되어짐
–copy: 서버 시작시 URL이 클립보드에 자동으로 복사되어짐
–host: 호스트 주소 설정 (default : 0.0.0.0 localhost)
–port: 서비스포트 설정(default:8080)
3. npm run [옵션]
- serve : 웹팩 개발 서버를 이용해 프로젝트 코드를 실행한다.실행 도중 소스코드가 변경되고 저장되면 즉시 브라우져에 화면이 반영된다.
- build : 배포 버전의 소스 코드를 빌드하여 지정 디렉터리에 저장한다. 빌드된 버전의 코드가 저장되는 기본 경로는 dist 디렉터리이다.
- lint : eslint 기능을 이용해 코드의 표준화되지 않은 부분을 검사하고 교정한다.
- inspect 현재 프로젝트의 웹팩 설정 정보를 보여준다.
aaboo 