이번에는 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 요리 -g
npm 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.js 모바일 컴포넌트 라이브러리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!