티스토리 뷰

Front-end/Vue.js

[Vue.js#2] Vue.js CLI 로 설치하기

douStory 2021. 11. 4. 19:19
728x90

Vue.js CLI 로 설치하기

오늘은 지난번 CDN으로 Vue.js 프레임 워크를 사용했다면

이번에는 CLI(Command-Line Interface) 로 설치를 해보도록 하겠습니다.

 

 

 

VS CODE 터미널 실행

VSCODE를 실행하고 창 하단을 드레그 해서 터미널 창을 올린 후 다음 명령어를 입력합니다.

npm i -g @vue/cli

* mac 유저 같은 경우 'sudo' 를 앞에 붙여 권한 부여를 해줘야 하는 경우도 있습니다.(sudo npm i -g @vue/cli)

* 앞 디렉토리는 상관 없습니다

 

성공적으로 설치가 끝났다면 

Vue CLI 홈페이지를 참고해서 몇가지 명령어를 실행 해볼 수 있다.

https://cli.vuejs.org/guide/

 

Overview | Vue CLI

Overview WARNING This documentation is for @vue/cli. For the old vue-cli, see here . Vue CLI is a full system for rapid Vue.js development, providing: Interactive project scaffolding via @vue/cli. Zero config rapid prototyping via @vue/cli + @vue/cli-servi

cli.vuejs.org

 

 

Vue로 프로젝트를 생성해보자! 

desktop으로 이동후에 

vue create 'folder name' 명령어를 통해 프로젝트를 생성해보자

 

오타가 없다면 다음과 같은 선택창이 뜨는데 방향키로 선택 할 수 있다. vue3버전을 선택!

 

그 다음,

code . -r 명령어를 통해 해당 프로젝트를 vscode내에서 실행시켜보자!

 

혹시 code 명령어를 찾을 수 없다고 오류가 난다면 해당 포스팅을 참고하면 된다.

https://webruden.tistory.com/540

 

VSCode 터미널에서 code 명령어 실행하는 방법 (vscode terminal code command, zsh: command not found: code)

VSCode에서 터미널을 사용할 때 code 명령어를 사용하는 경우가 굉장히 빈번하게 생기는데요. 간혹 VSCode에서 PATH를 인지하지 못해서 code 명령어를 사용하지 못하는 경우가 생깁니다. // 아래와 같은

webruden.tistory.com

 

 

 

 

Vue.js 프레임워크 살펴보기

정상적으로 실행된다면! 다음과 같은 화면이 보일 것이다.

 

'Front-end > Vue.js' 카테고리의 다른 글

[Vue.js#1] Vue CDN방식으로 간단하게 시작하기 / 설치방법 / Hello Vue!  (0) 2021.11.04
댓글