홍군'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/ 확인해 보면 아래와 같은 페이지가 뜨는 것을 통해 확인할 수 있다.