[Vue] OneUI Vue Template 사용기

OneUI Vue Template 사용기

솔루션 버전 업그레이드에 따라 Ext.js -> Vue.js로 급하게 프론트엔드를 변경했다. (사실 얼른바꾸고 싶었음....사원이라 지속적인 추천만 살짝쿵..)

Vue Template 종류는 여러개 있었는데, Envato market에서 OneUI 템플릿을 구매했다. 

구매한 이유 (현재는 일반 라이센스로 구매)

• 저렴한 가격
• 깔끔한 코드 평 (아직은 뷰를 잘 모르지만)
• 빠른 피드백 (메일을 보내면 즉각 답변)

여러 업체로부터 빠른 피드백을 받긴 했는데, 

사이트 반응속도부터 디자인, 가격 면에서 OneUI가 제일 우수한걸로 판단해서 결정하게 되었다.

OneUI 템플릿을 구매하면 project 폴더와 Document폴더를 받는데, Document폴더에 들어가면 상세한 Docs가 있어서 이부분을 정리하려고 한다. 

코드나 다른부분은 저작권 문제가 있을거 같아서,,,, 기록용으로 작성만 하겠다.

 

프로젝트 내 정보

Components 폴더

• BootstrapVue 컴포넌트
• OneUI Custom Components가 있다. -> Base로 시작하는 컴포넌트
  • main.js에 등록되어 있음.
  • 각각의 뷰 컴포넌트는 <base-vuefilename></base-vuefilename>과 같이 사용할 수 있다.

 

플러그인

• OneUI Vue Edtion에는 여러 플러그인을 보유중
• pure Vue.js 플러그인과 인기있는 js 라이브러리로 감싼 Vue.js 플러그인이 있다.
• 단순히 CSS style에 맞게 플러그인을 import하여 페이지 뷰를 작업하는데 사용할 수 있다. 
• 모듈 관련 의존성 제거방법
  • npm remove module-name from my system's console.
• 플러그인 / 라이브러리 / tool  install 방법
  • npm install module-name
• Vue CLS 웹 인터페이스 
  • terminal > "vue ui"

 

 

 

모르는 용어 정리

SASS

• CSS 전처리기로 CSS의 한계나 단점을 보완하기 위해 만들어진 CSS확장 언어.
• 방대한 양의 CSS를 다룰때 가독성이 떨어지는데 Sass는 추가적인 기능을 통해 단점을 보완한다.
• 기능 및 도구
  • 변수 / 조건문 / 반복문 / Mixin / 연산자 / Extend / Nesting / Import

 

Vue CLI

빠르게 Vue.js를 개발할 수 있게 도와주는 시스템.

 

 

Vuex : vue 관리패턴 라이브러리 -> 하나의 어플리케이션에 모든 컴포넌트들을 위한 중앙 집중형 저장공간을 제공한다.