Vue CLI

2020, Jun 25    

Vue CLI + vsCode 로 개발환경 셋팅

Vue공식 홈페이지 개발 가이드 문서를 보면 걸음마 아장아장 하는중 ㅋㅋ
아니, 걸음마가 아니라 기어가는 수준? ㅋㅋ
집에 책이 있긴 한데 읽어도 지루하고 눈에 잘 안들어와서 그냥 구글링으로 부딪히는 중이다.

요 며칠간 아장아장한 내용, - 개발환경 셋팅을 기록한다.

  1. 크롬에 Vue Devtools 확장 프로그램 설치

  2. Vue CLI 설치

    • vue i -g @vue/cli 이렇게 해야 최신버전으로 설치 된다고 해서 따라 했는데, 4.x 버전이 설치 됐다. (괜찮은가?)

    • 개발용 폴더 적당히 만들고, vue create 프로젝트명 하니까 이렇게 나온다.
      vue create project

    • 시키는대로 하니까 아래와 같이 서버가 실행되었다고 한다.
      run server

    • 로컬주소 localhost:8080 을 호출하니 기본 페이지가 노출
      run server

  3. VsCode extension 추가
    단순 text파일 보기용으로 쓰고 있다가, 이번에 vue 개발 ide로 사용해보고 있는데, 좋은 툴인것 같다.
    일단 전에 쓰던 아톰에 비해서 실행속도가 빠르고, 사용성이 좋은듯 하다.
    구글링해서 extension을 추가해봤는데, 유용한 도구가 많다.
  • 설치한 extension 나열
    • Prettier, ESLint, Vue VSCode snipppets, HTML CSS CLASS Completion, HTML Snippets, Debbger for chrome, Git History
Twitter Facebook Google+