安裝
npm i mint-ui -S
配置
全部調(diào)用
main.js:
import Vue from 'vue'
import MintUI from 'mint-ui' //新增
import 'mint-ui/lib/style.css' //新增
import App from './App.vue'
Vue.use(MintUI) //新增
new Vue({
el: '#app',
components: { App }
})
局部調(diào)用
安裝插件
npm install babel-plugin-component -D
main.js:
import Vue from 'vue'
// 引入mint-ui 框架樣式 (新增)
// 按需加載js (新增)
import MintUI from '@/MintUI/MintUI'
import App from './App.vue'
new Vue({
el: '#app',
components: { App }
})
將 .babelrc 修改為：
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
在 src 目錄下創(chuàng)建 MintUI 文件夾
在 MintUI 文件夾先 創(chuàng)建 MintUI.js
//必須引入
import Vue from 'vue'
// 調(diào)用輪播圖
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
// 調(diào)用 提示框
import { MessageBox } from 'mint-ui';
//調(diào)用 微標(biāo)
import { Badge } from 'mint-ui';
Vue.component(Badge.name, Badge);
需要調(diào)用其他組件，在官網(wǎng)API復(fù)制過來(lái)就可以
