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