17-Vue-mintUI

image

什么是mintUI

mintUI是饿了么前端团队推出的一款基于Vue.js 2.0 的移动端UI框架
大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 让我们能够专注于业务逻辑而不是UI界面

mintUI的使用

官方文档

1. 安装mintUI

npm i mint-ui -S

2. 导入框架和css文件

在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
// 导入mintUI和mintUI的CSS文件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

// 告诉Vue, 我们需要在项目中使用mintUI
Vue.use(MintUI)

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

3. 使用组件

在mintUI官方文档中找到需要的组件，将代码复制到需要的地方
例如：我复制了一段Button按钮和Switch的代码到App.vue组件中
App.vue

运行npm run serve指令后就可以在浏览器看到效果了

image

mintUI 优化

默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将mintUI中所有的组件打包到我们的项目中
这样就导致了我们的项目体积比较大,用户访问比较慢

如何优化

为了解决这个问题，mintUI推出了按需导入，按需打包，也就是只会将我们用到的组件打包到了我们的项目中
没有用到的不会被打包
参考文档

1. 安装 babel-plugin-component

npm install babel-plugin-component -D

2. 修改babel.config.js配置文件

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', { modules: false }]
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'mint-ui',
        style: true
      }
    ]
  ]
}

3. 按需导入组件

比如我只用到了 Button 和 Switch，那么需要在 main.js 中写入以下内容：
注意：

• 在MintUI中需要通过Vue.component来告诉Vue我们需要使用哪个组件，使用Vue.use()无效
• 在MintUI中哪怕是按需引入也必须导入CSS文件，否则样式无效

import Vue from 'vue'
import App from './App.vue'
// 导入CSS文件
import 'mint-ui/lib/style.css'

// 导入需要的组件
import { Button, Switch } from 'mint-ui'

// 通过Vue.component来告诉Vue我们需要使用哪个组件
Vue.component(Button.name, Button)
Vue.component(Switch.name, Switch)

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

运行npm run serve指令后依然可以在浏览器看到效果

image