ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Vue.js 로 Front-End 개발하기] 01. Vue.js로 개발 시작하기 개발환경 세팅
    Front End/Vue.js 2019. 7. 23. 16:38
    반응형

    Vue.js를 사용해 Front단을 개발할 일이 생겼다.

    Vue.js라는 것을 처음 접해보기 때문에 공부하며 정리한 내용들을 

    앞으로 계속 포스팅해 나아가 보겠다.

     

    항상 그렇듯 모든 개발의 시작은 개발환경 세팅에서부터 시작한다.

     

    개발환경 세팅을 위해 

     

    먼저 Node.js를 설치해준다.

    아래 링크로 들어가 각자 환경에 맞는 node.js를 설치해 준다.

    https://nodejs.org/ko/download/

     

    다운로드 | Node.js

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

    nodejs.org

     

    다음 마찬가지로 각자 환경에 맞는 Visual Studio Code를 다운로드하여 설치한다.

    설치 뒤에 VSCode로 개발을 좀 더 수월하게 하기 위하여 몇 가지 플러그인들을 설치한다.

     

    설치할 플러그인들 중 첫 번째로 Vetur라는 플러그인을 설치한다.

    아래 사진에서 보시는 것과 같이 벌써 1700만 명이 다운로드한 아주 유명한 플러그인이고

    다음과 같은 기능들을 제공하여 개발을 좀 더 수월하게끔 도와준다.

     

    • Syntax-highlighting
    • Snippet
    • Emmet
    • Linting / Error Checking
    • Formatting
    • Auto Completion
    • Debugging

     

     

     

     

     

     

     

    다음은 live server라는 플러그인이다.

    html 웹페이지를 바로 페스트 해볼 수 있도록 도와주는 플러그인이다.

     

     

     

     

     

     


     

    다음으로 vue cli를 설치 한다.

    VSCode에 와서 터미널을 실행시킨 뒤

    npm install -g @vue/cli를 입력한다.

     

     

    하지만 처음 저와 같이 따라오시는 중이시라면 저처럼 

    'npm'() 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

    와 같은 오류 메시지가 출력될 것이다.

     

    그럼 환경변수 세팅이 되어있지 않아서 발생하는 오류이다.

    해결방법은 고급 시스템 설정 -> 환경 변수 -> 시스템 변수 목록에 Path에 

     

    C:\Users\{사용자}\AppData\Roaming\npm 

     

    사용자에  사용자 이름을 넣어준 뒤 추가해주면 해결된다.

     

     

     

     

    자 이제 프로젝트를 생성해 보자.

    터미널에 vue create { 프로젝트 폴더명 }을 입력해준다.

    저 같은 경우에는 vue-study로, 세팅은 defualt로 만들었다.

     

     

     

    프로젝트가 생성이 되었다면

    생성된 프로젝트 폴더로 이동하셔서 

     

     

    npm run serve를 입력해주면 생성된 프로젝트가 로컬 서버에서 돌아가는 것을 확인할 수 있다.

    저 같은 경우에는 포트번호 8081번에서 돌아가고 있었다.

     

     

     

    위 터미널에 출력된 것 중에 

    app running at :

    -local : http://localhost:8081

     

    로컬 주소를 인터넷 창에 입력하면 아래와 같은 화면이 출력되며 정상적으로 프로젝트가 생성되어

    로컬 서버에서 돌아가고 있는 것을 확인할 수 있다.

     

     

     

    이렇게 기본적인 개발환경 세팅과

    프로젝트를 생성하여 로컬 서버에서 구동시켜보는 것까지 해보았다.

    다음 포스팅에서는 vue의 router기능을 활용하는 법을 알아보도록 하겠다.

    반응형
Designed by Tistory.