CentOS7 + Vue CLI 3.0 프로젝트 환경 구축

vue-cli는 Vue.js 의 작업환경을 간편하게 생성해준다.

나는 CentOS7 (7.4v) 환경에서 설치 / 프로젝트 생성을 했다.

저장소 할당 후 node js / npm을 설치한다.

저장소에 추가

curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -
curl -sL https://rpm.nodesource.com/setup_10.x | bash -

node js 설치

sudo yum install nodejs

버전확인

node --version

npm 및 vue-cli 설치

sudo yum -y install npm
sudo npm install -g @vue/cli

버전확인

vue --version

혹여 vue --version 명령어에 npm을 업그레이드 하라고 뜬다면 npm 버전 업그레이드를 하자

npm 버전 업그레이드

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

방화벽 포트 열어주기 - 홈 디렉토리에서 방화벽 해제

vue-cli의 기본포트 8080

vue ui의 포트 8000

http의 기본포트 80번 

세개의 포트를 열어주었다.

sudo firewall-cmd --zone=public --add-port=8000/tcp --permanent
sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent
sudo firewall-cmd --zone=public --add-port=80/tcp --permanent

방화벽 재시작

sudo firewall-cmd --reload

'vue create 프로젝트명' 으로 vue 프로젝트 생성

vue create test

설치시 preset을 지정할 수 있는데 추후 변경할수 있으므로 귀찮으면 일단 default로 설치한다.

vue-cli로 프로젝트 생성시 설치 완료후 별도로 npm install 을 할 필요 없이

필요한 node_module도 같이 설치해준다.

프로젝트 생성 시 텍스트 앞에 귀여운 아이콘이 뜬다는데

왜 나는 □ 로 뜨는가...

추가하고 싶은 플러그인이 있다면

vue add 플러그인명

으로 추가할수있다

vue add router
vue add axios

등 플러그인을 추가하면 자동으로 main.js 파일에 설정코드가 추가된다.

생성된 프로젝트 디렉토리에서 실행

npm run serve

80포트로 실행시 뒤에 --port 포트번호 로 실행하자

npm run serve -- --port 80

정상적으로 뜨면 빌드 명령어로 할수있다.

npm run build

빌드의 결과물은 dist 디렉토리에 담긴다

이 파일들을 상용 배포에 적합하도록 웹팩이 최적화 해놓은 것