GitHub의 Nice Vue UI 툴킷.

안녕. 이 기사에서는 Vue를 위한 멋진 UI 툴킷을 볼 것입니다. 준비가 되었으면 시작하겠습니다.

1-) 요소

첫 번째는 요소입니다. Element에는 좋은 구성 요소가 있다고 생각합니다. 예제로 프로젝트를 만들었습니다.



Github 레포: https://github.com/ElemeFE/element

브라우저 지원: 최신 브라우저 및 Internet Explorer 10+.

설치: npm install element-ui -S

빠른 시작

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

// or
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

2-) 아이뷰

두 번째는 iView입니다. 실제로 어떤 프로젝트에서도 사용하지 않았습니다. 조금 느리기 때문입니다. 제 의견입니다.



GitHub 레포: https://github.com/iview/iview

브라우저 지원: 대부분의 구성 요소 및 기능은 IE9 이상의 브라우저를 지원하지만 일부 구성 요소 및 기능은 IE를 지원하지 않습니다.

설치:

npm 사용:
npm install iview --save
글로벌 사용을 위한 스크립트 태그 사용:

<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">

빠른 시작

<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

3-) 뷰에티파이

이것은 Vuetify가 될 것입니다. 나는 그것을 사용한 적이 없다. 그러나 그들의 소개는 다음과 같습니다.

Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.

Build amazing applications with the power of Vue and Material Design and a massive library of beautifully crafted components. Created according to Google's Material Design Spec, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.

GitHub 레포: https://github.com/vuetifyjs/vuetify

브라우저 지원:

Vuetify supports all modern browsers, including IE11 and Safari 9+ (using polyfills). From mobile to laptop to desktop, you can rest assured that your application will work as expected. Interested in the bleeding edge? Try the vue-cli Webpack SSR (Server side rendered) template and build websites optimized for SEO.

설치:

Vue CLI 3 사용

vue create my-app

vue add vuetify

NPM 또는 원사 사용

# npm
npm install vuetify

# yarn
yarn add vuetify

빠른 시작

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

<v-app>
     <v-toolbar app>
       <v-toolbar-title>My Application</v-toolbar-title>
     </v-toolbar>
     <v-navigation-drawer app></v-navigation-drawer>
     <v-content>
       <v-container fluid>
          Hello World
       </v-container>
     </v-content>
   <v-footer></v-footer>
</v-app>

4-) 부피

이것은 Buefy가 될 것입니다. Bulma를 기반으로 하는 Vue.js용 경량 UI 구성 요소입니다. 우리는 회사 프로젝트에서 Buefy를 여러 번 사용했습니다.



GitHub 레포: https://github.com/buefy/buefy

브라우저 지원:

최신 버전의 Firefox, Chrome, Edge, Opera 및 Safari. IE10+는 부분적으로만 지원됩니다.

설치:

NPM 사용

npm install buefy

CDN 사용

<!-- Include Material Design Icons -->
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

빠른 시작

묶음

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

또는 개별 구성 요소

import Vue from 'vue'
import { Field, Input } from 'buefy/dist/components'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

or

import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

5-) 개미 디자인 뷰

저는 사실 이 UI 툴킷을 사용하지 않았습니다. 그들의 설명은 다음과 같습니다.

Following the Ant Design specification, we developed a Vue UI library antd that contains a set of high-quality components and demos for building rich, interactive user interfaces.

GitHub 레포: https://github.com/vueComponent/ant-design-vue

브라우저 지원:

최신 브라우저 및 Internet Explorer 9+(폴리필 포함)

설치:

NPM 사용
npm install ant-design-vue --save
원사 사용
yarn add ant-design-vue

빠른 시작

완전히 가져오기

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

위의 내용은 Antd를 완전히 가져옵니다. CSS 파일은 별도로 가져와야 합니다.

필요한 구성 요소만 가져오기

import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'

Vue.config.productionTip = false

/* v1.1.2 */
Vue.component(Button.name, Button)
Vue.component(Button.Group.name, Button.Group)

/* v1.1.3+ Automatically register components under Button, such as Button.Group */
Vue.use(Button)

Vue.prototype.$message = message

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

이 UI 툴킷이 도움이 되기를 바랍니다.

읽어 주셔서 감사합니다!