VUE.JS 기반 모 바 일 프레임 Mint UI 사용

Mint UI
GitHub： github.com/ElemeFE/mint
프로젝트 홈 페이지:mint-ui.github.io/#
Demo： elemefe.github.io/mint-
문서:mint-ui.github.io/docs/#
배 고 프 세 요?6 월 초 개원 이후 지역 사회 와 팀 내부 의 피드백 에 따라 bug 를 복원 하고 일부 구성 요 소 를 추가 하여 이번 주 에 0.2.0 버 전 을 발표 했다.민 트 UI 를 사용 하 는 Vue 프로젝트 를 0 부터 구축 하 는 방법 을 소개 한다.
비계
Vue.js 의 신속 한 발전 에 따라 현재 Vue 프로젝트 의 비 계 를 구축 하 는 데 많은 선택 이 있 습 니 다.예 를 들 어 공식 적 으로 제공 하 는 vue-cli 를 사용 할 수 있 습 니 다.본 고 는 배 고 프 십 니까?자신의 구축 도구 cooking 을 사용 하여 이 임 무 를 완성 합 니까?
우선,전역 설치 cooking:

npm i cooking -g

새 항목 폴 더:

mkdir mint-ui-example

프로젝트 폴 더 에 들 어가 cooking 으로 구축:

cooking init vue

마지막 매개 변수 vue 는 Vue.js 기반 비 계 를 구축 한 것 을 나타 낸다.
구축 과정 에서 cooking 은 다음 과 같은 인자 가 필요 합 니 다.

그 중에서'어떤 CSS 를 사용 하여 미리 처리 합 니까?'여기 서 선택 한 것 은 Salad 입 니 다.이것 은 PostCSS 를 바탕 으로 하 는 해결 방안 입 니 다.관심 이 있 는 학생 들 이 알 아 볼 수 있 습 니 다.물론 다른 프로세서 도 선택 할 수 있 습 니 다.
구축 완료 후 프로젝트 구 조 는 다음 과 같 습 니 다.

다음은 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 는 코드 를 포장 할 때 이 구성 요소 와 무관 한 파일 이 최종 코드 에 나타 나 지 않도록 보장 합 니 다.예 를 들 어 Button 구성 요 소 를 도입 해 야 할 경우 main.js 에서:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';

Vue.component(Button.name, Button);

위의 두 가지 도입 방법 모두 해당 CSS 파일 을 단독으로 도입 해 야 한 다 는 것 을 알 수 있다.특히 필요 에 따라 여러 구성 요 소 를 도입 할 때 불편 하 다.이 문 제 를 피하 기 위해 서 플러그 인 을 사용 할 수 있 습 니 다.우선 설치 해 야 합 니 다.

npm i babel-plugin-component -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 파일 을 자동 으로 가 져 옵 니 다.
쓰다
각 구성 요소 의 사용 방법 은 문 서 를 읽 으 십시오.여기 에는 작은 예 만 들 수 있 습 니 다.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>

다음 페이지 를 얻 을 수 있 습 니 다:

예고
지금까지 민 트 UI 사용법 소개 입 니 다.사용 하 는 과정 에서 어떤 문제 가 발생 하거나 우리 에 게 조언 을 해 주 고 싶다 면babel-plugin-component에 가서 issue 를 제기 하 는 것 을 환영 합 니 다.
이 모 바 일 구성 요소 라 이브 러 리 외 에 배 고 프 세 요?데스크 톱 구성 요소 라 이브 러 리GitHub 창고도 있 습 니 다.현재 우 리 는 그것 을 재 구성 하고 있 는데 이번 에는 UED 의 개입 으로 전체적인 시각 이 크게 향상 되 었 다.완 료 된 후에 도 원본 을 열 고 두 가지 버 전이 있 는데 각각 vue 1.0.x 와 vue 2.0 을 지원 합 니 다.물론 민 트 UI 도 vue 2.0 지원 을 검토 한다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.