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

새 프로젝트 폴더 만들기:

mkdir mint-ui-예제

프로젝트 폴더에 들어가서 요리를 사용하여 빌드하세요:

요리 초기화 뷰

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

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

npm i mint-ui --save

민트 UI를 소개합니다

🎜🎜 좋습니다. 후속 작업은 두 가지 상황으로 나눌 수 있습니다. 🎜🎜 🎜1. 모든 구성품 소개🎜🎜🎜 프로젝트가 Mint UI에서 더 많은 구성요소를 사용하는 경우 가장 쉬운 방법은 해당 구성요소를 모두 가져오는 것입니다. 이때 항목 파일 🎜 main.js: 🎜

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

🎜에 있어야 합니다. 🎜2. 주문형 소개🎜🎜🎜 특정 컴포넌트만 사용해야 한다면 이 컴포넌트만 도입하면 됩니다. Mint UI는 코드 패키징 시 이 컴포넌트와 관련 없는 파일이 최종 코드에 나타나지 않도록 할 수 있습니다. 예를 들어, main.js에 Button 구성 요소를 도입해야 하는 경우: 🎜

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

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

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

🎜 플러그인은 해당 CSS 파일을 자동으로 가져옵니다. 🎜🎜 🎜🎜사용 🎜🎜🎜🎜 각 🎜구성 요소를 사용하는 방법에 대한 설명서를 읽어보세요. 다음은 작은 예입니다. app.vue에서: 🎜rrreee🎜 이상은 Mint UI 사용법을 소개한 것입니다. 사용 중에 문제가 발생하거나 몇 가지 제안 사항을 제공하려는 경우 GitHub 저장소에 문제를 제출할 수 있습니다. 🎜

可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构，这次有了 UED 的介入，整体视觉有了很大的提升。完成后也会开源，而且会有两个版本，分别支持 vue 1.0.x 和 vue 2.0。当然，Mint UI 也会考虑支持 vue 2.0。

PS: mint-ui在手机页面的样式不正常问题

 问题一、

在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了，失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue父子组件通信使用方法

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

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