1. 개발환경구축 & 에디터 설정

개발환경구축

-nodejs ver.10 설치(안정화버전)

-npm i -g yarn (-g : 전역설치) ->   yarn 을 설치한다.
-git 설치 (전부 동의하면 됨)
-vscode 설치 :전부동의하면 됨. 

-vue cli 설치 : npm install -g @vue/cli 

-vuetify 설치 & 설정 : 아래쪽에 그림과 함께 설명을 해 놓았다.

-설치되었는지 확인할 때 :

 node -v
 npm -v
 git --version  
 vue --version

 

---

vue 골격만들기

-폴더생성후 이동하여 프로젝트를 만들어준다.

PS C:\> cd .\ionic
PS C:\ionic> mkdir TestPp
PS C:\ionic> cd .\TestPp
PS C:\ionic\TestPp> vue create test

 

ESLint : 코드를 보기 좋게 만들어 줌.

 

-새로운 Vue 프로젝트 생성이 끝났다. yarn 서버를 켠다.

PS C:\ionic\TestPp> cd test
PS C:\ionic\TestPp\test> yarn serve

yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4056ms                                                                 6:19:03 ├F10: PM┤


  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run yarn build.

-http://localhost:8080/ 주소로 들어가서 잘 생성되었는지 확인한다.

---

VUE 개발환경에 좋은 vscode extension 설치하기

Vetur : 뷰 프레임워크에 대해서 다양한 기능들을 제공하는 플러그인.

yarn 서버 다루기에 쉽다

편리하게 스니펫(snippet)을 쓸수 있다.

코드를 보기좋게 만들어줌.

ESLint 설정하기 onFocusChange : focus가 바뀔때 마다 자동저장한다.

한쪽 태그만 바뀌어도 양쪽 태그가 같이 바뀜.

키워드만 있으면 아이콘을 간단하게 넣을 수 있다.

---

vuetify 설치하기

PS C:\ionic\TestPp\test> code .
PS C:\ionic\TestPp\test> vue add vuetify

vuetify 설정하기

-http://localhost:8080/ 주소로 들어가서 vuetify 프레임 워크로 잘  생성되었는지 확인한다.