Vue 시작하기

VSCode, Node js LTS 버전 설치.

Windows Powershell 관리자 권한 실행 후

get-ExecutionPolicy

Set-ExecutionPolicy RemoteSigned -> Y

get-ExecutionPolicy -> RemoteSigned

 

VSCode에서

vue create test

cd test

npm run serve

로컬 호스트에서 바로 구동된다!

 

Vue create 프로젝트명

이렇게 Terminal에 입력하면 누구나 같은 구조로 시작할 수 있다.

 

맨밑에 package.json

  "name": "test", <-- 나의 프로젝트 명
  "version": "0.1.0", <-- 최초 나의 버전
  "private": true, <-- npm에 올리게 될 경우 프라이빗 설정
  "scripts": {
    "serve": "vue-cli-service serve", <-- npm run serve라는 명령어를 썼을 때 실제 구동되는 코드
    "build": "vue-cli-service build", <-- 빌드 시 사용(npm run build)
    "lint": "vue-cli-service lint" <-- 코드의 오류 같은 것들을 찾아준다.
  },

필수 사용 확장 프로그램

 

Vetur .vue파일의 vue 문법에 맞는 코드 Syntax Highlighting 지원.

JavaScript(ES6) code snippets 자바스크립트 코드 자동완성. 코드 블록을 선택하면 자동 완성된다!

ESLint ES+Lint ES = ECMA Script / Lint는 프로그램 오류, 버그, 스타일 오류 등을 잡는 도구.(문법 오류를 잡아준다.)

Prettier 코드 포메터. File-Preference-Setting  formatter 입력. Editor:Default Formatter - Default Formatter - Prettier 선택

              Editor: Format On Save 체크박스 선택 - 저장할 때마다 자동으로 Prettier 동작, 코드 포맷 맞춰줌.

              HTML - Enable / JavaScript - Enable

 

 

Vue/Vue CLI 설치

 

npm install -g vue

npm install -g @vue/cli

혹은

npm update -g @vue/cli (업데이트)

 

 

Babel         

- 우리가 최신 문법으로 개발하더라도, 구버전에서 구동이 안 될 수도 있다.

  하지만 바벨은 알아서 구버전에서도 동작하도록 바꿔줌.

 

PWA(Progressive Web App Support)

- 인터넷이 안되는 상황에서도 앱처럼 사용가능

 

Vuex

- 컴포넌트별로 개발하는데, 어떤 모듈은 모든 곳에서 공유해야 함 (로그인 정보) 즉, 공용 저장소의 역할

 

Router

- 라우팅

 

프로젝트 실행 시 Babel, Router, Vuex, Linter 설정 후 Vue 3.X 로 실행

 

ESLint + 코딩컨벤션

EsLint + Standard Config

Lint on save

In package.json

 

설정 후 시작