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]

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

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

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

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

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

여기도 그냥 yes

yes.

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

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

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

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

vue add vuetify

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

Yarn serve

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

기동시킨 첫 화면입니다.

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