Vue.js와 UIKit로 만드는 프런트 엔드 환경

최근 사내에서는 Vue.js가 유행하고 있습니다.
세상에서도 인기는 뛰어난 것 같고, 혼돈으로 한 프런트 엔드 프레임 워크 세계에서도 가장 부담없이 사용할 수 있다고 평판입니다.

UIkit은 bootstrap 등과 유사한 스타일 라이브러리입니다.
별로 巷에서는 소문은 듣지 않습니다만 사용하기 편리하게 이쪽도 업무로 애용하고 있습니다.
UIkit이 ver.3이 되어 Webpack에서 임포트 할 수 있게 되었기 때문에 스타터 킷을 작성했습니다.

UIkit이 3이 되어 개인적으로 기뻤던 것은 Webpack 대응과 Scss판을 할 수 있었던 것.
그건 그렇고, UIKit의 공식 사이트도 Vue.js에서 만들어졌습니다.

거기서 이번은 스타터 킷의 설명을 하면서 Vue.js, UIKit의 좋은 곳을 쓰려고 생각합니다.
※UIkit의 설명이 메인이 되어 버렸기 때문에 Vue.js,vue-loader,Webpack등 모르는 쪽은 의미 불명일지도 모릅니다;

Vue.js+UIkit3 Boilerplate

Vue.js+UIkit3 스타터 키트

git clone 하고 적당히 디렉토리 이름 바꾸어yarn install & yarn dev 하면 곧 이런 이케한 느낌의 화면을 만들 수 버리는 키트입니다.

디렉토리 구성은 이런 느낌

.
├── README.md
├── dist
│   ├── build.js
│   └── bundle.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── bundle.js
│   ├── main.js
│   └── theme
│       └── uikit.app-theme.scss
├── webpack.config.js
└── yarn.lock

/src/분 dぇ. js

여기 UIKit에 필요한 소스를 가져옵니다.

bundle.js

import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
import 'uikit/dist/css/uikit.css'
import './theme/uikit.app-theme.scss'
UIkit.use(Icons);

UIkit CSS 소스도 읽고 있으며, 이것은 런타임에 HTML <head> 내에 <style>로 JS에 의해 생성됩니다.
Webpack에는 CSS는 파일로 내보내는 패턴과 <style> 로 동적으로 생성하는 패턴이 있습니다만,
안녕하세요, 후자를 선택합니다. HTML 파일에 영향을 주지 않기 때문에 관리가 즐겁다고.

파일로 내보내는 패턴 => Webpack using ExtractTextWebpackPlugin

CSS 테마 맞춤설정

UIkit은 디폴트는 매우 심플한 디자인이므로 무언가 커스터마이징하게 된다고 생각합니다.
이 키트에서는 theme/uikit.app-theme.scss 에 쓰면 덮어쓸 수 있게 되어 있습니다.

본격적으로 테마를 만나고 싶다면

Vue.js 내에서 UIKit 사용

UIkit의 좋은 로로로서 각종의 컴퍼넌트를 UIkit.modal(element, options); 와 같이 JS로부터 조작이 하기 쉬운 점이 있습니다.
그래서 Vue.js에서의 조작도 간단합니다. 자주 사용하는 샘플을 만들어 보았습니다.

Notification을 사용하는 샘플

샘플 JSFiddle

new Vue({
  el: '#app',
  data: {
    text: "",
    messages: [
        'add message here.'
    ]
  },
  methods: {
    set() {
        this.messages.push(this.text);
        this.text = "";
      },
      show() {
        this.messages.forEach(m => UIkit.notification(m, {
          status: 'success'
        }));
        this.messages = [];
      }
  }
})

버튼을 로딩 표시로 설정

별로 UIKit 관계 없지만 자주 사용하는 처리의 샘플입니다.
샘플 JSFiddle

new Vue({
  el: '#app',
  data() {
    return {
      url: 'https://api.github.com/search/repositories',
      events: [],
      isLoading: false
    }
  },
  methods: {
    get() {
        this.isLoading = true;
            axios.get(this.url, {
        params: {
          q: 'vuejs'
        }
      })
      .then(response => {
        this.events = response.data.items;
        this.isLoading = false;
      })
    }  
  }
})

라고 이런 느낌으로 axios로 통신하고, Vue.js로 데이터 바인딩하고, UIKit로 화면을 만들면 Web 대시보드적인 것은 바로 만들 수 있습니다!
앞으로 이것을 Chart.js 통합하거나 컬러 테마를 늘려 admin 킷 같은 것도 만들려고합니다.

Reference

이 문제에 관하여(Vue.js와 UIKit로 만드는 프런트 엔드 환경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/bobu_web/items/4daa20d3b4bd327ca91c

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다