[Vue.js] Vue real world example(git 소스) 설치 및 실행

0. Git Address

https://github.com/gothinkster/vue-realworld-example-app.git

gothinkster/vue-realworld-example-app

Vue를 학습하다가, 단일 파일로 테스트(Vue Devtools)로만 작업을 수행하니 실제 개발자들이 어떻게 프로젝트를 개발하고 유지보수 할 수 있는지에 대한 감이 오질 않았다.

이를 좀 더 자세히 알기 위해 vue real world라는 키워드로 검색하여, 위의 git 주소를 얻었다.

처음에는 vue-cli, vue를 설치해둔 상태의 VMware에서 테스트를 해보았는데 잘 되지 않아서 다음과 같은 순서로 다시 진행하였고, 성공적으로 프로젝트가 띄워지는 것을 확인하여 기록하고자 이 포스트를 작성한다.

 

1. Install Basic Libraries

git install

$ apt install git

npm install

$ apt install npm

yarn install

$ npm install -g yarn

만약 yarn을 설치하고 global에 문제가 발생할 경우 다음과 같은 곳에 환경변수를 설정해줘야 한다.

.profile, .bash_profile, .bashrc, .zshrc 등…

$ export PATH="$PATH:/opt/yarn-[version]/bin"

 

2. vue real world example download and install

git clone

$ git clone https://github.com/gothinkster/vue-realworld-example-app.git

install editorcnofig globally

$ npm install -g editorconfig

install dependencies

$ yarn install

serve with hot reload at localhost:8080

$ yarn serve

 

3. 결과

yarn으로 실행된 vue project

구동중인 vue project(with yarn serve)