Vue(1) 뷰 개발환경 세팅하기 (Cli, vuetify)

윈도우 환경과 Visual Studio Code 에서 뷰 프로젝트를 설치해보자 

뷰는 프레임워크이기 때문에 웹사이트에서 다운받을 필요없이 npm명령어로 바로 설치가 가능하다.

 

1. 뷰 설치

npm install vue

2. 뷰 CLI 설치 

npm install -g @vue/cli

vue-cli 란? (더보기클릭)

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

 

3. 뷰 CLI 설치 확인

npm 설치리스트를 확인해서 vue/cli가 제대로 설치 되있는지 확인해보자 

npm ls -g

 

4. 뷰 프로젝트 설치 

vue create 프로젝트명

 

5. 프로젝트 옵션설정까지 다 마치면 프로젝트 생성이 된다. 

 

6. 뷰티파이 설치하기

cd 프로젝트명  // 설치될 프로젝트 경로설정 제대로 하고 
vue add vuetify // 뷰티파이 설치

7. 실행하기 

npm run serve 

명령어 입력 후 터미널에 적힌 포트번호를 크롬창에 복붙하면.... 잘나온다 !! 👌