Vue 개발 환경 설정

개발툴

  VS Code

  추천 플러그인

        - vue(jcbuisson) : Vue문법 확인해주는 기능        

        - Auto Close Tag(Jun Han) : HTML 태그 자동으로 닫아주는 기능

        - Auto Rename Tag : HTML 태그 변경시 연관된 태그의 이름을 자동으로 변경해주는 기능

 

  Chrome

  추천 플러그인

        - vue.js devtools : vue 구조에 맞게 디버깅 가능

 

개발 방식

  SFC(Single File Component) 구조로 개발(확장자 .vue)

       하나의 파일에 HTML, CSS, JavaScript를 묶어서 관리개발하는 방식

       해당 내용에 대한 설명 https://vuejs.org/guide/scaling-up/sfc.html#introduction

 

  Composition API 방식으로 개발

       vue 개발 특성상 연관 있는 변수와 함수를 함께 모아 놓기 힘든데, Composition API 방식이 이를 해결.

       Setup 함수를 이용했었는데, <Script Setup> ... </Script> 라는 태그를 제공하여 매우 편리하게 사용가능 함.

        해당 내용에 대한 설명 https://vuejs.org/api/sfc-script-setup.html        

 

  개발 폴더 구조

      - assets : 이미지, 파일 등의 정적 데이터
      - common : 공통으로 사용하는 js 파일
      - components : 공통으로 사용하는 .vue 파일
      - pages : 실제 보이는 페이지로써 Component를 조합하거나 단독으로 보여줌 .vue 파일
      - router : vue router
      - store : vuex

 

시작하기

 Node.js 설치 - NPM 명령어를 사용하기 위함

 Vue Cli 설치 - Vue 프로젝트를 빠르게 구성하고 빌드 및 배포해주는 도구

     - npm install -g @vue/cli

 Vue 프로젝트 생성

     - cmd 창에서 프로젝트를 생성할 폴더로 이동

     - vue create <프로젝트명>

 

Backend 개발 서버와 Proxy 연결

 개발시에 Local PC의 cors 정책을 쉽게 적용하는 방법

https://eunjinii.tistory.com/47