vue에 Mint-UI를 설치하는 방법

Mint UI는 Ele.me 프론트엔드 팀이 출시한 Vue.js 기반의 모바일 컴포넌트 라이브러리입니다. 이 글에서는 Vue 프로젝트에서 Mint-UI를 설치하고 사용하는 방법을 소개합니다. it

一, Mint UI는 Ele.me 프론트엔드 팀이 출시한 Vue.js 기반의 모바일 컴포넌트 라이브러리입니다. 사용 문서:

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

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

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

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

• Vue.js의 효율적인 구성 요소화 솔루션을 사용하여 Mint UI는 가볍습니다. 모두 가져와도 압축 파일 크기는 ~30kb(JS + CSS) gzip에 불과합니다.

둘째, 먼저 vue 프로젝트를 생성하고, 앞서 작성한 //www.jb51.net/article/131600.htm

Three를 참고한 후 Mint UI를 설치합니다:

npm i mint-ui --save

Four, 그다음 Mint를 소개해야 합니다. UI, 여기에는 두 가지 상황이 있습니다:

　　1. 모든 구성 요소 소개

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

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

　 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 파일을 별도로 도입해야 합니다. 이는 특히 주문형 가져오기 방법을 사용하여 여러 구성 요소를 도입할 때 불편합니다.

5. 이 문제를 방지하려면 babel-plugin-comfort 플러그인을 사용할 수 있습니다.

　1. 우선 설치합니다:

npm i babel-plugin-component -D

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

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2"
 ],
 "plugins": ["transform-runtime",["component",[
   {"libraryName":"mint-ui","style":true}
  ]]],
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

　3. 이런 식으로 위의 두 가지 가져오기 방법을 다음과 같이 단순화할 수 있습니다.

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

　　이전에는 설치된 플러그인은 해당 CSS 파일을 자동으로 가져옵니다!

6. UI 컴포넌트의 구체적인 사용법 - 공식 문서 http://mint-ui.github.io/docs/

를 직접 참고할 수 있습니다. 사용 과정에서 Mint UI 문서가 그다지 상세하지 않은 것을 발견했습니다. , 그리고 많은 특정 사용법에는 추가 정보가 필요합니다...

　1. 먼저 공식 문서의 첫 번째 소개와 사용법을 살펴보세요:

　이런 종류의 구성 요소가 소개되면 line Vue.comComponent ("해당 컴포넌트 이름") 사용시 vue 문서의 템플릿 부분으로 이동하여 해당 태그 이름을 사용하고 속성을 추가하면 실제로 공식 코드를 직접 복사할 수 있습니다. 문서이지만 상대적으로 복잡하고 다중 속성 구성 요소에는 Baidu가 필요합니다.Vue.component("对应的组件名"),使用的时候是再vue文档的template部分,使用对应的标签名加属性,其实就是直接复制官方文档的代码即可,不过相对复杂多属性的组件就要另外百度了.

　　那么接下来看一下在项目中的使用代码:

//在main.js里面添加--复制官方文档该组件对应的引入即可
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
<template>
 <mt-header title="修改客户资料">
   <a @click="toBack" replace slot="left">
    <a class="back-icon"></a>
   </a>
   <!--这个头部导航栏关键的是mt-header父标签,而该标签内的内容是根据需求写的哦-->
 </mt-header>
</template>

组件效果图

　　2. 然后看官网文档的第二种引入和用法:

　　我们可以看到这种组件引入的时候,居然没有Vue.component("对应的组件名"),然后看基本用法,就这么简单一句......

그런 다음 프로젝트에 사용된 코드를 살펴보겠습니다.

//提示框
import { Toast } from 'mint-ui';
created:function(){
 Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}

컴포넌트 렌더링

　　2. 그럼 공식 홈페이지 문서의 두 번째 소개와 사용법을 살펴보세요:

　us 이런 컴포넌트를 도입하면 Vue.comComponent("해당 컴포넌트 이름")가 없다는 것을 알 수 있는데, 그리고 기본적인 사용법을 보면 이렇게 간단합니다...

　 제가 참고한 첫 번째 방법은 문서의 Toast 컴포넌트를 직접 도입한 후 스크립트에서 사용하는 것입니다. , 다음과 같은 오류가 보고됩니다:

//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from 'mint-ui';
window.Toast= Toast;

　바이두에서 검색해보니 저처럼 이런 문제를 겪은 분들이 많은 것 같더군요...

　사실 토스트의 사용법을 보면 알 수 있습니다. Toast는 메소드이기 때문에 정의하지 않고 js에서 직접 사용하면 오류가 발생하므로 컴포넌트를 도입할 때 메소드를 전역 변수로 설정합니다. 설정 후에는 더 이상 오류가 보고되지 않습니다. 페이지의 구성요소를 다시 살펴보세요.

　

구성요소 렌더링

위 내용이 여러분에게 도움이 되기를 바랍니다. 미래. 🎜🎜관련 기사: 🎜🎜🎜JS를 사용하여 그림 변경 시계 구현(자세한 튜토리얼)🎜🎜

Angular4에서 DOM 속성 바인딩 구현

JS를 사용하여 닭 100마리 구매 문제 계산

Angular4에서 HTML 속성 바인딩 구현 방법

위 내용은 vue에 Mint-UI를 설치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!