본문 바로가기
program/Vue

vue 설치부터 vuetify 설치까지

by 믹스 2018. 8. 21.
반응형

Vue & Vuetify

우선은 vue Install 부터.

설치 자체는 무척 간단하게 되어 있습니다만. Yarn 이나 npm 으로 설치를 진행 하려면 우선적으로 node 가 깔려 있을 필요가 있습니다.

가장 손쉽게 접근하는 방법은 CDN을 활용하는 방법입니다.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

연습만 하는 것이라면 jsfiddle이나 codepen 에서도 연습이 가능합니다. CDN을 사용하면 사용해 보는데는 문제가 없지만, 전 프로젝트에 사용해야 하는 관계로 설치버전으로 진행했습니다. 어디에서라도 참조하여 프로젝트를 생성시킬 수 있도록 '-g' 옵션을 활용합니다.

npm install -g @vue/cli

설치 후에는 제대로 깔렸는지, 버전 확인을 해준뒤 프로젝트를 생성합니다.

vue -V
vue create [project-name]

하나하나 코드를 치기가 뭐해서.. 스샷으로 대치를..

설치과정 스크린샷 1

Default 가 아닌 Manually로 설치를 진행합니다.

설치과정 스크린샷 2

프로젝트에 사용할 몇가지 옵션들, PWA support, Router등을 선택하여 줍니다.

설치과정 스크린샷 3

Router 의 모드를 깔끔한 url로 보여주기 위하여 history 로 설정했습니다.

설치과정 스크린샷 4

전 SCSS 를 사랑하기에 이 옵션으로...

설치과정 스크린샷 5

여기도 그냥 yes

설치과정 스크린샷 6

yes.

설치과정 스크린샷 7

package.json에 옵션들을 묶을지 따로 설정할지에 대한 옵션은 각자 편의대로 하시면 좋을 것 같습니다. 전 나중에 동일한 환경을 구축할 경우 약간 편할 거라 생각하면서 In package 옵션으로 진행했습니다.

설치과정 스크린샷 8

마지막으로 저장하고 나면 설치를 진행합니다.

설치과정 스크린샷 9

이제 vue에 대한 설치는 끝났습니다. 

설치과정 스크린샷 10

이제 프레임워크를 사용하기 위하여 vuetify 플러그인을 설치해줍니다.

vue add vuetify

설치과정 스크린샷 11

첫 옵션을 yes로 하게되면 hello world 화면을 vuetify 초기값으로 바꿉니다. 취향에 따라 다르겠지만, 전 기본적으로 vue 학습이 우선이었기에 이 부분은 no 로 진행을 했습니다. 이 부분 이외에는 그냥 yes 로 전부 진행했고 나머진 no로 진행했습니다.

Yarn serve

설치과정 스크린샷 12

필요로 하는 모든 설치가 끝난뒤 서버를 실행하였습니다.

설치완료 스크린샷 1

기동시킨 첫 화면입니다.

설치완료 스크린샷 2

참고로, Vuetify 설치시 덮어 씌우기를 선택할 경우는 초기 화면이 이렇게 보이게 됩니다. 이상으로 우선 작업에 필요한 환경은 일단락 시켰습니다. 다음부터는 문법이라던가 자잘한 것들을 조금씩, 가끔씩 업데이트 해 나갈 예정입니다.

반응형

'program > Vue' 카테고리의 다른 글

Vuetify 2.x 버전으로 레이아웃 잡기  (0) 2020.09.26
vuetify theme color 설정  (0) 2018.11.07
Vue.js에서 CSS module 사용하기  (0) 2018.10.21
vuetify grid layout 들여다보기  (0) 2018.10.13

댓글0