关于mint-ui全局配置 与按需导入

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

cnpm install babel-plugin-component -D -S

修改.babelrc文件

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime",["component",
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]
    ]
}

按需引包

import { Button} from 'mint-ui'
Vue.component(Button.name, Button)

在vue实力对象的render属性所指的组件 的template标签中可以直接引用

<mt-button type="primary">primary</mt-button>

 

全局配置 

安装 cnpm i mint-ui -S -D

在index.js文件中导入

import MintUI from 'mint-ui'

1. 导入所有MintUI组件： import mintui from 'min-tui'
2. 导入样式   import 'mint-ui/lib/style.css'
3. 在 vue 中使用 MintUI：   Vue.use(mintui)
4. 此时可以直接使用mintui官网里面的 css Components
5. 例如使用 使用css components  不需要引包、 直接在vue实例的render属性指向的需要渲染的组件的template标签中使用标签<mt-header fixed title="固定在顶部"></mt-header>
6. 但是使用js Components需要导包 例如实现消息提示框 先要引包 import { Toast } from 'mint-ui';
7. 在使用 Toast({  message: '提示',  position: 'bottom',  duration: 5000});