홍군's 설레는 IT Story

 지난 포스팅에서는 이곳저곳 찾아다니면서 Vue.js를 개발하기 위한 환경설정을 했었다! 그렇다면,,이번엔 프로젝트를 생성하기 위해서 어떻게 해야할지 찾아보면서 또 한번 정리하자!

Vue-CLI를 이용해서 프로젝트 생성하기

     개발환경 

      OS : Mac OS Catalina 10.15.4

      node.js 설치 링크 : https://nodejs.org/ko/download/

    1. homebrew, node.js 설치 

      - 우선, Vue-CLI를 설치하려면 npm이 필요하다.

         npm(Node Package Manager)은 Node.js를 설치하면 자동으로 설치가 되기 때문에 Node.js를 먼저 설치해준다.

      - mac에서는 hombrew로 설치하는게 간편하더라 

      - hombrew 설치 참고 링크 : https://whitepaek.tistory.com/3

     # node 설치 

       => brew install node

     # Node.js 버전 확인
       => node --version
     # npm 버전 확인
       => npm --version

   필자는 확인해보니깐, node.js은 12.16.2이고, npm은 6.14.4을 설치하였다.

   2. Vue-CLI설치하여 로컬서버에서 Vue구동시켜보기  

      # Vue-CLI 설치
        => npm install -g @vue-cli 

          ※ Vue-CLI을 설치중에 위와같은 에러가 발생한다면, 반드시 "sudo" 권한을 주어야한다. 

      # Vue 버전 확인
        => vue --version  

     필자는 버전이 2.9.6 버전이었다 

     이렇게 vue 설치가 마무리됬다. 휴우...

 3. Vue 프로젝트 생성하기 

   # Vue 프로젝트를 만들 경로에 들어간다. 

   => vue create 프로젝트명 

    cd 프로젝트명 으로 이동해서 

    npm run serve를 실행시킨 후 http://localhost:8080/ 확인해 보면 아래와 같은 페이지가 뜨는 것을 통해 확인할 수 있다. 

 회사에서 vue.js를 접할 기회가 생겨 후다닥 스터디를 진행하게 되었다. 요즘 많이 사용한다는 vsCode로 학습을 해볼까 한다.

그동안은 Eclipse환경에서 개발을 하다보니 조금 적응이 안될 수 있지만! 아직 젊기에 도전해볼 수 이싸!! 

그래서 오늘은 vsCode로 vue.js 개발환경을 세팅하는 방법을 정리하려고한다!

  visual studio Code 설치 링크 : https://code.visualstudio.com/

1. Visual Studio Code 한글 적용하기! 

  1.1  처음 에디터를 켜면 영어로 되어 있기 때문에, 우선 한글화를 적용하려고한다. vsCode에서도 패키지 설치가 가능한데,

        Eclipse에서 사용했던 Marketplace에서 플러그인들을 추가해서 사용했던 것처럼 동일한 방식이더라..!

  1.2 "Korean Language Pack for Visual Studio Code"를 검색해서 한국어 패치를 해주자!

  1.3  설치가 다되면 [RestartNow]버튼을 눌러 vsCode를 재실행 시켜준다! 그러면, 한국어 패치가 적용된걸 확인할 수 있다. 

2. Vue.js를 사용하기 위한 Visual Studio Code Plugin Install

  2.1  Vue.js를 효과적으로 사용하기 위해서는 플러그인들을 설치

      - 필자가 지금 설치해본건 아래 세개지만, 이외에도 여러가지가 있기에 출처와 좀 더 좋은 블로그를 찾아서 플러그인을 설치하도록하자! 

        (출처 : https://joshua1988.github.io/web-development/vuejs/boost-productivity/ 

• Prettier - 코드 자동정렬
• vetur - 문법강조 및 자동완성등 기능 제공
• Vue VSCode Snippets - 자동완성기능 제공
• Material Icon Theme - 아이콘 구분기능 제공
• ESLint - JavaScript 코드스타일, 문법기능 제공
• Live Server -  작성한 소스코드의 웹페이지를 바로 확인해볼 수 있는 기능 제공

3. Chrome에서 Extendtion Tool 설치 

   - 크롬웹스토어 에서 확장프로그램 "vue.js devtools"를 추가하자

   - 크롬웹스토어 링크 : https://chrome.google.com/webstore/category/extensions?hl=ko