node.js 환경에 vue-cli 설치 + Git 연동

*vue-cli 를 쓰는 이유

express-generate 와 마찬가지로 vue.js 프로젝트의 구성을 도와주는 역할을 한다.

vue-cli를 쓰지 않더라도 vue.js 프로젝트를 만드는데 아무 문제가 없다.

하지만 vue.js와 관련된 오픈소스들은 대부분 vue-cli를 통해 쉽게 구성이 가능하고,

또한 프로젝트 시작 시 git으로 clone 하지 않더라도 vue-cli로도 손쉽게 설치가 가능하기 때문에 vue-cli를 많이 사용한다.

vue-cli를 설치하기 위해서는 node.js 8.9 버전 이상이 필요

 

2020-02-27 현재 설치 버전

node.js : v12.16.1

vue-cli : @vue/cli 4.2.3

 

1. yarn 설치

//npm으로 설치한 vue-cli로 프로젝트를 만들더라도 yarn을 요구하므로 yarn이 미리 설치되어있어야 함

#npm install -g yarn

 

 

2. vue-cli 설치

//2.x

#npm install -g vue-cli

//3.x 이상

#npm install -g @vue/cli

 

//잘 설치되었는지 확인

#vue --version

@vue/cli 4.2.3

 

//vue-cli 2.x Template을 사용하려면 아래 명령어로 하나 더 설치

#npm i -g @vue/cli-init

 

//2.x 에서처럼 템플릿 사용이 가능하다. 

//예를들면,

#vue init webpack frontend

 

 

3. vue 프로젝트 생성

//2.x

#vue init webpack frontend

//3.x 이상

#vue create frontend

//대화형 진행에서 default로 기본 설치

 

4.서버 실행

//frontend

#cd frontend

 

//서버실행

#npm run serve

 

//외부에서 접속해본다. 기본포트 8080

http://192.201.xxx.xx:8080

 

//아래 화면이 뜨면 성공

 

 

5. vue-cli plugin 설치 

//vue-cli plugin를 설치하기 위해서는 vue add 명령어 사용

//테스트로 설치할 axios는 서버와 비동기 통신을 가능하게 해주는 라이브러리 (ajax 와 동일한 역할을 한다고 보면 됨)

#vue add axios

또는

#vue add vue-cli-plugin-axios

//vue-cli를 사용하지 않고 vue.js 프로젝트를 만들었다면 axios를 npm 으로 설치 후

main.js 또는 app.js 에 Vue.use()를 수동으로 추가해줘야 함

//vue-cli를 통해 plugin 설치시 axios.js 가 src/main.js 에 

import './plugins/axios'

위 처럼 자동으로 들어감

 

 

6. Git 연동

//git 연동할 프로젝트 폴더로 가서 git 설치

#cd frontend

#yum install git

 

//git 연동

#git init

#git add README.md

#git commit -m  "first commit"

 

//자신의 github 프로젝트의 repository주소와 연결

#git remote add origin https://github.com/{자신의 github 계정}/frontend.git

 

//연결된 저장소로 push

#git push -u origin master

//위 명령어 [rejected]시 강제 업로드

#git push origin +master

 

//node_module 은 gitignore로 제외

원격저장소 공유시, 모듈이 설치되는 node_module 폴더는 제외시켜야 함.

#vi .gitignore

//위 명령어로 확인해보고 node_modules 폴더가 자동으로 들어가져있다면 아래 명령은 안해도 됨

#echo "node_modules/" > .gitignore

 

//pull할때

#git pull origin master