Vue.js

2020/08/31 - [JavaScript/vue.js] - Vue.js

2020/08/31 - [JavaScript/vue.js] - vue.js spring boot

2020/08/31 - [JavaScript/vue.js] - vue.js webpack 구조

2020/08/31 - [JavaScript/vue.js] - Vue.js 배포

2020/08/31 - [JavaScript/vue.js] - vue.js webpack spring boot

 

Vue.js

Vue는 ECMAScript5 기능을 사용하기때문에 IE8 이하 버전은 지원 하지 않는다. 하지만 모든 ECMAScript5 호환 브라우저를 지원한다.

Vue.js는 다인페이지 어플리케이션을 빠르게 구축할수 있는 공식 CLI 를 제공한다. 핫리로드 지원 및 저장시 린트 체크및 프로적션을 준비하는데 몇분이면 가능 하다.

사용자 인터페이스를 만들기위한 프로그레시브 프레임워크 이다. 다른 단일형 프레임 워크와 달리 Vue는 점직적으로 채탈 할 수 있도록 설계 되었다. 핵심 라이브러리는 뷰 레이어만 초첨을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다.

 

Vue-CLI(command line interface)

내부적으로 Webpack 을 활용 하며 vue-cli 명령으로 최종 webpack 결과물을 생성 새커 준다.

• 새로운 프로젝트 생성,
• 플러그인 설치 및 삭제
• 웹 GUI 도구 사용
• vue.config.js 오버라이딩을 통해 웹팩 설정(구성)을 추가적으로 설정 할 수 있다.

vue-cli-service option

1. —open : 서버 시작시 브라우저 같이 실행
2. —copy : 서버 시작시 url 주소가 클립보드에 복사
3. —host : 호스트 주소 설정
4. —port : 포트 설정
5. .... 등등

pacakge.json

{
  "name": "front-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --open --mode test --port 3000",
    "local": "vue-cli-service serve --open --mode local --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 

production, development test

vue.js config env 설정

환경별 environment 공식 사이트 참조

Modes and Environment Variables | Vue CLI

Modes and Environment Variables | Vue CLI

루트 폴더에 다음과 같이 생성 한다.

 

프로젝트 루트에 다음 파일을 배치하여 env 변수를 지정 할 수 있다.

.env                # loaded in all cases (글로벌로 모두 사용됨)
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

 

env 파일에는 환경변수 key=value 한쌍으로 표현된다.

VUE_APP_{변수명} 으로 시작된다. VUE_APP 필수

VUE_APP_ID=development id
VUE_APP_BASE_URL=http://localhost:8080

 

Vue.js 와 함께 사용되는 주요 구성 라이브러리

• Vus.js UI 개발 프레임 워크

• Vue Router - 라우트 관리

• Vuex : 뷰에서 데이터를 쉽게 공유하고 대규모 vue 개발을 편리하게 해줌

• Vue loader

  • .vue 파일 읽어주기 (싱글 컴포넌트 파일(SCF)을 처리하는 Webpack 로더)

  • Vue 컴포넌트를 일반적인 작업 스크립트 모듈로 변활할 수 있는 webpack 에서 사용 하는 로더

• webpack - 모듈 번들러 , 일부 변형을 통해 코드를 전달하고 하나의 파일로 묶을수 있는 도구

   

   

  → 웹팩을 사용하여 파일을 하나의 파이로 패킹하여 배포 한다. 여러개의 파일이 하나로 묶이기 때문에 파일이 커져서 문제가 되기도 하지만, 캐싱 처리를 통해 해결 한다.

  • webpack-cli : webpack 명령어 실행
  • webpack-dev-server : 로컬 개발 서버를 실행하는데 필요함

   

• babel: ES6 코드를 ES5로 변환해준다.

• TypeScript : 앵큘러 js 에서 표준으로 삼고있는 언어

• Progressive Web App Support : 웹앱을 만들고자 할때 선택

• Router : vue 에서 화면을 이동하기 위한 플러그인 모듈

• e2e testion : e2e(end-to-end) 통합 테스트

• unit testing : 단위테스트 플러그인

• linter/formatter : js 코딩에 대한 코드 표준 가이드

• CSS Pre-processors : SASS, LESS 와 같이 화면을 꾸며주는 CSS를 프로그램 처럼 작업할수 있게 해줌

• Vuetify : vue template, vue.bootstrap 과 같음

 

 

Nuxt.js 란 ?

Vue.js 애프리케이션 개발을 보다 강력하게 사용하기 쉽게 만들어주는 프레임워크 이다.

Nuxt.js는 비동기 데이터 , 미들웨어 레이아웃등과 같은 client와 server 사이에서 개발하는데 도움이 되는 많은 기능을 제공한다.

https://ko.nuxtjs.org/

Nuxt.js - Vue.js 프레임워크