day07-vuejs-MintUI 组件与mui(代码片段)

Mint-UI官方文档

用 饿了么的 MintUI 组件：

1.导入所有MintUI组件：

import MintUI from 'mint-ui'

2.导入样式表：:

import 'mint-ui/lib/style.css'

3.在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：

Vue.use(MintUI)

4.使用的例子：

primary

Mint-UI中按需导入的配置方式:

按需导入 Mint-UI组件:

import { Button } from 'mint-ui'

使用 Vue.component 注册 按钮组件:

Vue.component(Button.name, Button)

使用 MUI 代码片段:

注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发； 因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件； 从体验上来说， MUI和Bootstrap类似； 理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

官网首页

1. 导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

2. 在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

3. 根据官方提供的文档和example，尝试使用相关的组件