소개

Vue.js 공부를 할 때 환경 구축을 했으므로 절차를 남겨 둡니다.

구축할 환경

macOS Mojave 10.14.5
nodebrew: 1.0.1
npm: 6.9.0
노드: 12.6.0
vue: 3.9.2

nodebrew 설치

먼저 Node.js를 설치하기 위해 nodebrew를 설치합니다.
nodebrew는 Node.js 버전을 관리하는 도구입니다.

nodebrew 설치에는 homebrew가 필요하므로 설치해 둡니다.
이쪽은 이전의 기사내에서 쓰고 있으므로 생략합니다.
Mac에서 Ruby 환경 구축 (Homebrew, rbenv)

homebrew 설치 후 다음 명령을 실행하여 nodebrew를 설치합니다.

brew install nodebrew

설치 후 다음 내용을 .bash_profile 파일에 추가합니다.
(.bash_profile은 환경에 따라 다릅니다.)

export PATH=$HOME/.nodebrew/current/bin:$PATH

추가 후 다음 명령을 실행합니다.

source .bash_profile

다음 명령을 실행하여 버전 정보 등이 표시되면 성공합니다.

nodebrew help

그대로 Node를 설치할 수 없으므로 다음 명령을 실행합니다.

nodebrew setup

Node.js 설치

nodebrew ls-remote 에서 설치할 수 있는 버전 목록과 nodebrew ls 에서 현재 설치된 버전 목록을 확인할 수 있습니다.

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104  

v0.2.0    v0.2.1    v0.2.2    v0.2.3    v0.2.4    v0.2.5    v0.2.6    

v0.3.0    v0.3.1    v0.3.2    v0.3.3    v0.3.4    v0.3.5    v0.3.6    v0.3.7
v0.3.8    

v0.4.0    v0.4.1    v0.4.2    v0.4.3    v0.4.4    v0.4.5    v0.4.6    v0.4.7
v0.4.8    v0.4.9    v0.4.10   v0.4.11   v0.4.12   

v0.5.0    v0.5.1    v0.5.2    v0.5.3    v0.5.4    v0.5.5    v0.5.6    v0.5.7
v0.5.8    v0.5.9    v0.5.10   

v0.6.0    v0.6.1    v0.6.2    v0.6.3    v0.6.4    v0.6.5    v0.6.6    v0.6.7
v0.6.8    v0.6.9    v0.6.10   v0.6.11   v0.6.12   v0.6.13   v0.6.14   v0.6.15
v0.6.16   v0.6.17   v0.6.18   v0.6.19   v0.6.20   v0.6.21   

v0.7.0    v0.7.1    v0.7.2    v0.7.3    v0.7.4    v0.7.5    v0.7.6    v0.7.7
v0.7.8    v0.7.9    v0.7.10   v0.7.11   v0.7.12   

v0.8.0    v0.8.1    v0.8.2    v0.8.3    v0.8.4    v0.8.5    v0.8.6    v0.8.7
v0.8.8    v0.8.9    v0.8.10   v0.8.11   v0.8.12   v0.8.13   v0.8.14   v0.8.15
v0.8.16   v0.8.17   v0.8.18   v0.8.19   v0.8.20   v0.8.21   v0.8.22   v0.8.23
v0.8.24   v0.8.25   v0.8.26   v0.8.27   v0.8.28   

v0.9.0    v0.9.1    v0.9.2    v0.9.3    v0.9.4    v0.9.5    v0.9.6    v0.9.7
v0.9.8    v0.9.9    v0.9.10   v0.9.11   v0.9.12   

v0.10.0   v0.10.1   v0.10.2   v0.10.3   v0.10.4   v0.10.5   v0.10.6   v0.10.7
v0.10.8   v0.10.9   v0.10.10  v0.10.11  v0.10.12  v0.10.13  v0.10.14  v0.10.15
v0.10.16  v0.10.17  v0.10.18  v0.10.19  v0.10.20  v0.10.21  v0.10.22  v0.10.23
v0.10.24  v0.10.25  v0.10.26  v0.10.27  v0.10.28  v0.10.29  v0.10.30  v0.10.31
v0.10.32  v0.10.33  v0.10.34  v0.10.35  v0.10.36  v0.10.37  v0.10.38  v0.10.39
v0.10.40  v0.10.41  v0.10.42  v0.10.43  v0.10.44  v0.10.45  v0.10.46  v0.10.47
v0.10.48  

v0.11.0   v0.11.1   v0.11.2   v0.11.3   v0.11.4   v0.11.5   v0.11.6   v0.11.7
v0.11.8   v0.11.9   v0.11.10  v0.11.11  v0.11.12  v0.11.13  v0.11.14  v0.11.15
v0.11.16  

v0.12.0   v0.12.1   v0.12.2   v0.12.3   v0.12.4   v0.12.5   v0.12.6   v0.12.7
v0.12.8   v0.12.9   v0.12.10  v0.12.11  v0.12.12  v0.12.13  v0.12.14  v0.12.15
v0.12.16  v0.12.17  v0.12.18  

v4.0.0    v4.1.0    v4.1.1    v4.1.2    v4.2.0    v4.2.1    v4.2.2    v4.2.3
v4.2.4    v4.2.5    v4.2.6    v4.3.0    v4.3.1    v4.3.2    v4.4.0    v4.4.1
v4.4.2    v4.4.3    v4.4.4    v4.4.5    v4.4.6    v4.4.7    v4.5.0    v4.6.0
v4.6.1    v4.6.2    v4.7.0    v4.7.1    v4.7.2    v4.7.3    v4.8.0    v4.8.1
v4.8.2    v4.8.3    v4.8.4    v4.8.5    v4.8.6    v4.8.7    v4.9.0    v4.9.1


v5.0.0    v5.1.0    v5.1.1    v5.2.0    v5.3.0    v5.4.0    v5.4.1    v5.5.0
v5.6.0    v5.7.0    v5.7.1    v5.8.0    v5.9.0    v5.9.1    v5.10.0   v5.10.1
v5.11.0   v5.11.1   v5.12.0   

v6.0.0    v6.1.0    v6.2.0    v6.2.1    v6.2.2    v6.3.0    v6.3.1    v6.4.0
v6.5.0    v6.6.0    v6.7.0    v6.8.0    v6.8.1    v6.9.0    v6.9.1    v6.9.2
v6.9.3    v6.9.4    v6.9.5    v6.10.0   v6.10.1   v6.10.2   v6.10.3   v6.11.0
v6.11.1   v6.11.2   v6.11.3   v6.11.4   v6.11.5   v6.12.0   v6.12.1   v6.12.2
v6.12.3   v6.13.0   v6.13.1   v6.14.0   v6.14.1   v6.14.2   v6.14.3   v6.14.4
v6.15.0   v6.15.1   v6.16.0   v6.17.0   v6.17.1   

v7.0.0    v7.1.0    v7.2.0    v7.2.1    v7.3.0    v7.4.0    v7.5.0    v7.6.0
v7.7.0    v7.7.1    v7.7.2    v7.7.3    v7.7.4    v7.8.0    v7.9.0    v7.10.0
v7.10.1   

v8.0.0    v8.1.0    v8.1.1    v8.1.2    v8.1.3    v8.1.4    v8.2.0    v8.2.1
v8.3.0    v8.4.0    v8.5.0    v8.6.0    v8.7.0    v8.8.0    v8.8.1    v8.9.0
v8.9.1    v8.9.2    v8.9.3    v8.9.4    v8.10.0   v8.11.0   v8.11.1   v8.11.2
v8.11.3   v8.11.4   v8.12.0   v8.13.0   v8.14.0   v8.14.1   v8.15.0   v8.15.1
v8.16.0   

v9.0.0    v9.1.0    v9.2.0    v9.2.1    v9.3.0    v9.4.0    v9.5.0    v9.6.0
v9.6.1    v9.7.0    v9.7.1    v9.8.0    v9.9.0    v9.10.0   v9.10.1   v9.11.0
v9.11.1   v9.11.2   

v10.0.0   v10.1.0   v10.2.0   v10.2.1   v10.3.0   v10.4.0   v10.4.1   v10.5.0
v10.6.0   v10.7.0   v10.8.0   v10.9.0   v10.10.0  v10.11.0  v10.12.0  v10.13.0
v10.14.0  v10.14.1  v10.14.2  v10.15.0  v10.15.1  v10.15.2  v10.15.3  v10.16.0


v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0   v11.6.0   v11.7.0
v11.8.0   v11.9.0   v11.10.0  v11.10.1  v11.11.0  v11.12.0  v11.13.0  v11.14.0
v11.15.0  

v12.0.0   v12.1.0   v12.2.0   v12.3.0   v12.3.1   v12.4.0   v12.5.0   v12.6.0


[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] 

[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
[email protected] [email protected] [email protected] [email protected] [email protected] 

[email protected] [email protected] [email protected] [email protected] [email protected] 

$ nodebrew ls
v12.6.0

current: v12.6.0

실제로 설치하는 경우 다음 명령을 실행합니다.

nodebrew install-binary "バージョン"
（例：nodebrew install-binary v12.6.0）

또한 nodebrew install-binary latest로 최신 버전을 설치할 수 있습니다.
그런 다음 사용할 버전을 지정합니다.

nodebrew use "バージョン"
（例：nodebrew use v12.6.0）

여기도 nodebrew use latest 에서 최신 버전을 지정할 수 있습니다.
마지막으로 다음 명령을 실행하여 버전이 표시되면 성공합니다.

node -v

또한 npm도 동시에 설치되어 있으므로 다음 명령으로 버전을 확인할 수 있습니다.

npm -v

vue-cli 설치

vue-cli는 Vue.js의 병아리 등을 만들어주는 개발 도구입니다.
다음 명령을 실행하여 설치합니다.

npm install -g @vue/cli

다음 명령을 실행하여 Vue 버전이 표시되면 성공합니다.

vue -V

프로젝트 만들기

다음 명령을 실행하여 Vue.js 프로젝트를 만들 수 있습니다.

vue create "プロジェクト名"
（例：vue create sample）

질문을 듣기 때문에 기본값과 설명서를 선택할 수 있습니다.
기본값이라면 그대로 프로젝트를 만들 수 있습니다. 매뉴얼의 경우는 몇 가지 질문을 받기 때문에 대답하겠습니다.

프로젝트를 만든 후에는 만든 디렉터리로 이동한 다음 npm run serve 를 실행하여 프로젝트를 시작합니다.

cd  sample
npm run serve

아래와 같은 표시가 나오므로 http://localhost:8080/ 에 액세스 하는 것으로, 병아리의 페이지를 표시할 수 있습니다.

  App running at:
  - Local:   http://localhost:8080/ 

다음과 유사한 페이지가 표시됩니다.