Vue, vuetify 프로젝트 만들기 (1)

1. 설치

npm은 깔려 있단 가정하에

npm install -g @vue/cli

 

설치후 버전 확인

vue -- version

---

2. 프로젝트 생성

명령어 : vue create [프로젝트 이름]

ex) vue create sample

 

위 명령을 치면

기존 내가 만든 셋팅, vue 권장 셋팅, manually로 직접 셋팅하는 선택지가 주어진다.

 

 

나는 주로 manual로 선택시

Babel, Router, Vuex를 선택한다

보통 Lint까지 많이 깔지만 나는 vue 초보자고 규칙에 맞게 짜려니 스트레스 받아 공부할때는 굳이 lint가 필수는 아닌것 같다.

 

Babel : 최신버전의 자바스크립트 코드를 ES5환경에서도 동작하도록 하는 컴파일러 - 걍 깔면 될듯

Router : 싱글 페이지 어플리케이션을 만들기 위한것 - 실제론 한 페이진데 여러 페이지처럼 동작하는것, 공부하다보면 금방 알게됨

Vuex : 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴, 또는 라이브러리

Lint : 코드 스타일과 품질을 관리해주는것

 

그외 setting 선택지

Choose a version of Vue.js : 2.x

Use history mode for router : y

where do you prefer placing config for babel... : In dedicated config files

save this as a preset for..(다음에 이 셋팅 그대로 쓸래?) : y or n

 

---

3. 프로젝트 실행 및 확인

1) 실행

//설치된 폴더로 가기

cd sample

//서버 실행

yarn serve 혹은 npm run serve

 

위와 같은 화면이 뜨면 성공

http://localhost:8080 으로 접속하면

아래와 같은 page 확인 가능

 

 

---

이어서 Vuetify 도 설치를 한다.

설치하면 좋은점은 똥손도 깔끔한 페이지를 만들수 있다. 물론 똥손이 아니면 깔필요는 없다.

 

vue add vuetify

를 한뒤 또 선택창이 나오는데 나는 아래와 같이 선택했다.

 

 

다른 Post 보기