[실전] Vue 로 실제 프로젝트 구성하기

Vue 로 실제 프로젝트를 시작하기 위한 기본 환경 구성 세팅을 알아보려고 합니다. 간단하게요~ 자세한 내용은 링크들을 참조해주세요 ^^

Vue 
로 웹 프로젝트를 시작하기 전에 한가지 알아둘 점은 웹팩 설치시, 인터넷 익스플로러 9 이상 브라우저에서만 동작한다는 점 입니다. 순수 vue 로는 인터넷 익스플로러 11 부터 정상 동작합니다. (그 외 크롬 등에서는 잘 돌아가요)

약 5~10% 의 유저들이 아직도 윈도우 XP 에서 돌아가는 인터넷 익스플로러 8을 사용한다고 합니다. 그 고객들을 위해서는 '브라우저를 업그레이드 해주세요' 같은 문구와 설치 URL 이 포함된 브릿지 페이지를 하나 제작해서 띄워주면 좋을 것 같아요.

#1. 개발 환경 구성


CLI 세팅 (3.0)
npm install -g @vue/cli

Router 세팅 (자세히 보기)
npm install vue-router --save

웹팩 세팅
vue init webpack 프로젝트이름

그 뒤

npm i
npm run dev

하시면 실행화면을 볼 수 있습니다


#2. 화면 퍼블리싱을 위한 세팅

SCSS 사용 (scss 로더 설치)
npm install sass-loader node-sass webpack --save-dev
+ 자세한 내용은 여기를 참고하세요
+ SCSS 문법 참조

Bootstrap 사용하기 https://bootstrap-vue.js.org/
npm i bootstrap-vue
만약 Vuetify 나 Google Material 같은 라이브러리를 사용한다면, 굳이 Bootstrap 을 사용할 필요는 없습니다. 비슷한 Grid System이 라이브러리들에 내장되어 있어서 중복됩니다

+ Vuetify Grid System https://vuetifyjs.com/ko/layout/grid


#3 라이브러리 세팅

여기여기를 참고해보세요

Vuetify 초기 세팅하기 (공식 홈페이지: https://vuetifyjs.com/ko/getting-started/quick-start)

vue add vuetify
vuetify 라이브러리 컴포넌트 사용시 <v-app></v-app> 안에 모든 컴포넌트를 넣어야  정상 작동합니다



# 기타 유용한 컴포넌트들

File-uploader
https://github.com/lian-yue/vue-upload-component


Tree List Component
https://github.com/shuiRong/vue-drag-tree


Rating (리뷰 별점 등록) 컴포넌트
https://github.com/craigh411/vue-star-rating

댓글

주간 인기글

[Android] 변화된 findViewById를 확인해보자

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

카드뉴스 마케팅 팁

[네이버클라우드] 서버 인스턴스 생성하기

[ubuntu] 신규 계정에 sudo 권한 추가하기