라벨이 프론트엔드인 게시물 표시

[실전] 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 vuet…

Vue.js 라이브러리

플랫폼 사업팀에서 할 새로운 사업에 Vue.js 를 사용해서 만들어 보기로 했습니다.
그래서 알아본 상용 또는 무료 라이브러리들입니다


먼저 공식 홈페이지 https://vuejs.org/ 에서는 간단한 템플릿과 예제들을 볼 수 있구요,

https://github.com/vuejs/awesome-vue
이곳은 vue 에서 필요한 기능들을 다운받을 수 있는 웬만한 모든 링크가 모여있는 곳입니다.



1. Vuetifyjs

https://vuetifyjs.com/ko/

ionic 을 생각나게 하는 라이브러리, 웬만한 UI 컴포넌트는 다 있습니다


2. Vue Material

https://vuematerial.io/

angular 버전에서도 굉장히 잘 만들어져 있던 material UI 라이브러리가 vue 에도 있네요
한 가지 걱정되는 건, 예쁘지만 무거울 수도 있다는 점..?
퍼포먼스 때문에 angular 프로젝트에서는 제대로 사용을 못해봤습니다
vue 는 다른지 좀 더 테스트 해봐야겠네요~


3. Keen UI

https://josephuspaye.github.io/Keen-UI/#/ui-alert

앞서 소개한 라이브러리들 보다는 크지 않은 규모의, 작고 심플한 컴포넌트들이 많이 있습니다. 부분적으로 필요할 때 쓰면 좋을 것 같네요!



2018년도 꼭 알아야 할 vue 라이브러리들
https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f

+ 하나 이상의 라이브러리를 쓰는 것은 추천하지 않습니다. 무거워지기 때문에


그밖에 wrapbootstrap 에서 보았던 CMS 용 UI 라이브러리 중 하나인 GENESISUI 의 vue.js 버전 모음도 있네요. 그래프 등이 많아서 하나 사두면 CMS 만드는 시간을 절약할 수 있을 듯 합니다.
https://genesisui.com/admin-templates/vuejs/



모든 UI 에 가장 자주, 많이 쓰이는 갤러리 컴포넌트 vue 버전
https…