Vue.js 모바일 컴포넌트 라이브러리를 사용하는 방법

이번에는 Vue.js 모바일 컴포넌트 라이브러리 사용 방법을 알려드리겠습니다. Vue.js 모바일 컴포넌트 라이브러리 사용 시 주의사항은 무엇인가요?

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

진정한 의미에서 요청 시 구성 요소를 로드합니다. 파일 크기가 너무 커질 염려 없이 선언된 구성 요소와 해당 스타일 파일만 로드할 수 있습니다.

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

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

민트 UI

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

비계

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

먼저 전 세계적으로 Cooking을 설치하세요:

npm 요리 -gnpm i cooking -g

新建项目文件夹：

mkdir mint-ui-example

进入项目文件夹，使用 cooking 进行构建：

cooking init vue

最后的参数 vue 表示构建的是基于 Vue.js 的脚手架。

其中“使用何种 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 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题，可以使用 babel-plugin-component 插件。首先当然是安装它：

npm i babel-plugin-component -D

그 중 "어떤 CSS 전처리를 사용할 것인가"는 PostCSS를 기반으로 한 솔루션인 Salad에 대해 알아보겠습니다. 물론 다른 전처리기를 선택할 수도 있습니다. 다음으로 Mint UI 설치:

{
 "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);

<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>

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

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

vue父子组件通信使用方法

mint-ui loadmore上拉加载与下拉刷新冲突处理方法

위 내용은 Vue.js 모바일 컴포넌트 라이브러리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!