MintUI入门(1)——使用vue-cli集成Mint UI环境搭建步骤

Web前端 潘老师 1年前 (2020-09-13) 1347 ℃ (0) 扫码查看

1、Mint UI是由饿了么前端团队推出的一个基于 Vue.js 的移动端组件库,可以帮助我们快速开发移动端前台页面。

2、项目官网:http://mint-ui.github.io/#!/zh-cn
3、w3cshool教程:

Mint UI 中文文档_w3cschool

Mint UI 基于 Vue.js 的移动端组件库_来自Mint UI 中文文档,w3cschool编程狮。

3、特性介绍

  • Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
  • 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
  • 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
  • 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

1、新建一个基于vue-cli的vue项目,名为mint-app

2、打开该项目终端,运行如下指令安装Mint UI

npm install mint-ui -S

以上指令适用于Vue2.x版本(我们目前基本都有2.x),如果是Vue1.x版本则用如下指令:

# Vue 1.x
npm install mint-ui@1 -S

MintUI入门(1)——使用vue-cli集成Mint UI环境搭建步骤
3、在main.js中引入Mint UI,有两种方式:
1)引入全部组件

import Vue from 'vue'
import App from './App.vue'
// 引入Mint全部组件
import Mint from 'mint-ui';
// 引入Mint样式
import 'mint-ui/lib/style.css'
// 安装Mint
Vue.use(Mint);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2)按需引入组件

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

一般我们全部引入即可。

接着上面安装好Mint UI后,接下来我们使用Mint UI实现一个轮播图组件。

1)在assets目录下新建一个images目录,并下载3张相同尺寸的图片放到images下,我这里从淘宝首页下载了3张,尺寸为520*280
MintUI入门(1)——使用vue-cli集成Mint UI环境搭建步骤
2)在components目录下新建Banner.vue轮播图组件,4s自动切换,代码如下:

<template>
  <!-- 轮播图 :auto="4000"表示4秒切换-->
  <mt-swipe :auto="4000">
    <mt-swipe-item v-for="(item,index) in pics" :key="index">
      <img :src="item.url">
    </mt-swipe-item>
  </mt-swipe>
</template>
<script>
//导入图片 
import pic1 from '../assets/images/pic1.jpg';
import pic2 from '../assets/images/pic2.jpg';
import pic3 from '../assets/images/pic3.jpg';
export default {
  name:'Banner',
  data(){
      return{
          // 图片数组,图片如果不导入在这里使用require
          pics:[
              {url:pic1},
              {url:pic2},
              {url:pic3}
          ]
      }
  }
}
</script>
<style scoped>
.mint-swipe {
  height: 200px;
}
.mint-swipe img {
  width: 100%;
}
</style>

3)将Banner.vue挂在到App.vue中并使用,App.vue如下:

<template>
  <div id="app">
    <Banner></Banner>
  </div>
</template>

<script>
import Banner from './components/Banner.vue'

export default {
  name: 'app',
  components: {
    Banner
  }
}
</script>

<style>
</style>

4)运行项目测试效果:
MintUI入门(1)——使用vue-cli集成Mint UI环境搭建步骤


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:MintUI入门(1)——使用vue-cli集成Mint UI环境搭建步骤
喜欢 (5)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!