Mint-UI是是一个基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
优点：
- 高效
可以快速构建出风格统一的页面，提升开发效率。 - 体验度高
Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。 - 轻量化
依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。
目前已经兼容vue2.0，放心使用
安利过后，开始进入正题，快速开始
1、安装
根据之前的开发环境，打开项目，打开终端，选择2.0安装命令
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
安装成功如下图：
image.png
2、引入
- 方式一：引入全部组件
如果你的项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。当然也省时省力
找到src / main.js 文件
在原来基础上添加
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
- 方式二：按需引入
如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。
例如：需要引入 Button 组件，
在src / main.js中：
import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);
3、使用
在我们的.vue文件中，简单添加几个组件测试一下，例如：
<template>
<div class="home">
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
<h1>home</h1>
</div>
</template>
命令运行 npm run dev
image.png
4、优化
问题：引入mintUI时都要单独引入相应的 CSS 文件。当使用按需引入的方法引入多个组件时，非常不方便。
解决：使用babel-plugin-component插件。
- 安装
npm i babel-plugin-component -D
在跟目录下有个 .babelrc 文件
- 配置
"plugins": ["transform-runtime",
["component",
{
"libraryName": "mint-ui",
"style": true
}
]],
⚠️ 注意：
代码结构如下：
{
"presets": [
["env", {
"modules": false,
......
}],
"stage-2"
],
"plugins": ["transform-runtime",
["component",
{
"libraryName": "mint-ui",
"style": true
}
]],
"env": {
.......
}
}
可能每个人生成的文件中，细节不太一样，看清楚结构，配置相应的属性，如果配错了，看看上述代码结构，是不是放错位置或者，少写或多写了标点符号
现在我们可以简化一下之前的引入代码
- 方法一中
import MintUI from 'mint-ui';
Vue.use(MintUI);
- 方法二中
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
这时插件会自动引入相应的 CSS 文件。
运行效果和之前一样就是成功了，可以开始写漂亮的界面了
网友评论