집 > 기사 > 웹 프론트엔드 > Vue.js 모바일 컴포넌트 라이브러리 기반 MintUI에 대한 자세한 설명

Vue.js 모바일 컴포넌트 라이브러리 기반 MintUI에 대한 자세한 설명

小云云원래의: 2018-01-19 13:53:164317검색

Mint UI에는 일상적인 모바일 개발 요구 사항을 충족할 수 있는 풍부한 CSS 및 JS 구성 요소가 포함되어 있습니다. 다음에는 이 글을 통해 Vue.js 모바일 컴포넌트 라이브러리를 기반으로 한 Mint UI를 공유하겠습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

공식 웹사이트 주소 http://mint-ui.github.io/

Mint UI에는 일상적인 모바일 개발 요구 사항을 충족할 수 있는 풍부한 CSS 및 JS 구성 요소가 포함되어 있습니다. 이를 통해 통일된 스타일의 페이지를 빠르게 구축하고 개발 효율성을 높일 수 있습니다.

요구에 따라 구성요소를 실제로 로드합니다. 파일 크기가 너무 커질 염려 없이 선언된 구성 요소와 해당 스타일 파일만 로드할 수 있습니다.

Mint UI는 모바일 단말기의 성능 임계값을 고려하여 CSS3를 사용하여 다양한 애니메이션을 처리함으로써 불필요한 브라우저 다시 그리기 및 재배열을 방지함으로써 사용자가 원활하고 원활한 경험을 얻을 수 있도록 합니다.

Vue.js의 효율적인 구성 요소화 솔루션을 사용하여 Mint UI는 가볍습니다. 다 소개하더라도 압축파일 크기는 100+K에 불과합니다.

Mint UI

GitHub: https://github.com/ElemeFE/mint-ui

프로젝트 홈페이지: http://mint-ui.github.io/#!/zh-cn

Demo : http://elemefe.github.io/mint-ui/#!/

문서: http://mint-ui.github.io/docs/#!/zh-cn

Eleme 프론트엔드 작성 팀 출시된 Mint UI는 Vue.js 기반의 모바일 컴포넌트 라이브러리입니다. 6월 초에 오픈 소스로 공개되었기 때문에 커뮤니티와 팀의 피드백을 바탕으로 일부 버그가 수정되었고 일부 새로운 구성 요소가 추가되었습니다. 버전 0.2.0이 이번 주에 출시되었습니다. 이 문서에서는 Mint UI를 사용하여 Vue 프로젝트를 처음부터 빌드하는 방법을 설명합니다.

Scaffolding

Vue.js의 급속한 발전으로 인해 현재 Vue 프로젝트를 위한 스캐폴딩을 구축할 수 있는 옵션이 많이 있습니다. 예를 들어 공식적으로 제공되는 vue-cli를 사용할 수 있습니다. 이 기사에서는 Ele.me의 자체 빌드 도구 요리를 사용하여 이 작업을 완료합니다.

먼저, 전역적으로 Cooking을 설치합니다:

npm i Cooking -g

새 프로젝트 폴더 만들기:

mkdir mint-ui-example

프로젝트 폴더에 들어가서 Cooking을 사용하여 빌드:

cooking init vue

마지막 매개변수 vue는 스캐폴딩이 Vue.js를 기반으로 구축되었음을 나타냅니다.

구성 과정에서 요리에는 다음 매개변수가 필요합니다.

그중 "어떤 CSS 전처리를 사용할 것인가"는 PostCSS 기반 솔루션인 Salad에 대해 자세히 알아볼 수 있습니다. 물론 다른 전처리기를 선택할 수도 있습니다.

빌드 완료 후 프로젝트 구조는 다음과 같습니다.

다음으로 Mint UI를 설치합니다.

npm i mint-ui --save

Mint UI를 소개합니다

자, 후속 작업은 두 가지 상황으로 나눌 수 있습니다. :

1. 모든 구성 요소를 소개합니다

프로젝트에서 Mint UI의 많은 구성 요소를 사용하는 경우 가장 쉬운 방법은 모두 소개하는 것입니다. 이때 항목 파일 main.js에 있어야 합니다.

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

2. 요청 시 가져오기

특정 컴포넌트만 사용해야 하는 경우 Mint UI만 도입하면 이를 보장할 수 있습니다. 코드를 패키징할 때 이 구성 요소와는 아무 관련이 없습니다. 파일은 최종 코드에 표시되지 않습니다. 예를 들어, Main.js에서 Button 컴포넌트를 도입해야 하는 경우:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

위의 두 가지 도입 방법은 해당 CSS 파일을 별도로 도입해야 함을 알 수 있습니다. 이는 특히 주문형 가져오기 방법을 사용하여 여러 구성 요소를 도입할 때 불편합니다. 이 문제를 방지하려면 babel-plugin-comComponent 플러그인을 사용할 수 있습니다. 가장 먼저 할 일은 설치하는 것입니다:

npm i babel-plugin-comComponent -D

그런 다음 .babelrc에서 구성합니다:

{
 "plugins": ["other-plugin", ["component", [
 { "libraryName": "mint-ui", "style": true }
 ]]]
}

위의 두 가지 소개 방법은 다음과 같이 단순화될 수 있습니다:

import MintUI from 'mint-ui';
Vue.use(MintUI);

및

import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

플러그인은 해당 CSS 파일을 자동으로 가져옵니다.

Usage

각 구성 요소를 사용하는 방법에 대한 설명서를 읽어보세요. 다음은 작은 예입니다. app.vue에서:

<template>
 <h1>mint-ui-example</h1>
 <mt-button
 type="primary"
 @click="sheetVisible = true">
 选择操作
 </mt-button>
 <mt-actionsheet
 cancel-text=""
 :actions="actions"
 :visible.sync="sheetVisible">
 </mt-actionsheet>
</template>
<script>
 import { Toast, MessageBox } from 'mint-ui';
 export default {
 name: 'app',
 data() {
 return {
 sheetVisible: false,
 actions: [{
 name: '展示 Toast',
 method: this.showToast
 }, {
 name: '展示 Message Box',
 method: this.showMsgbox
 }]
 };
 },
 methods: {
 showToast() {
 Toast('这是一个 Toast');
 },
 showMsgbox() {
 MessageBox('提示', '这是一个 Message Box');
 }
 }
 };
</script>

는 다음 페이지를 가져옵니다:

Preview

위는 Mint UI 사용 방법에 대한 소개입니다. 사용 중에 문제가 발생하거나 몇 가지 제안 사항을 제공하려는 경우 GitHub 저장소에 문제를 제출할 수 있습니다.

일부 학생들은 Ele.me에 이 모바일 구성 요소 라이브러리 외에도 데스크톱 구성 요소 라이브러리 vue-desktop이 있다는 것을 알고 있을 것입니다. 현재 재구축 중입니다. 이번에는 UED의 개입으로 전체적인 시야가 크게 개선되었습니다. 또한 완료 후 오픈 소스로 제공될 예정이며 각각 vue 1.0.x와 vue 2.0을 지원하는 두 가지 버전이 있을 예정입니다. 물론 Mint UI는 vue 2.0 지원도 고려할 것입니다.

PS: 모바일 페이지의 mint-ui 스타일이 평범하지 않습니다.

문제 1.

vue2.0 + mint-ui를 사용할 때 PC 쪽에서는 스타일이 괜찮은데, 모바일에서는 스타일이 이상합니다.

이것은 헤더 파일 선언 문제입니다. index.html

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Vue.js 모바일 컴포넌트 라이브러리 기반 MintUI에 대한 자세한 설명

관련 기사