vue 全家桶（四）引入UI框架Mint-UI

目录

一.安装Mint-UI

二.引入Mint-UI

---

mint-ui 是有饿了么前端团队推出的基于Vue.js的移动端组件库。

一.安装Mint-UI

推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。

npm i mint-ui -S

二.引入Mint-UI

1.完全引入

这是一种全局引入的方式，引入后在具体的页面或者组件内不需要再进行其他的引入，但是无论是否需要该组件，都将全部引入，对于性能优化不是很好。

  main.js

import Vue from 'vue';
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
import App from './App.vue';

Vue.config.productionTip = false;
Vue.use(MintUI);



new Vue({
  el: '#app',
  components: { App }
})

2.按需引入

  这里借助babel-plugin-component组件，实现按需加载，以减小项目体积。

  安装babel-plugin-component

npm install babel-plugin-component -D

 配置.babelrc

{
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

 然后引入需要使用的组件--->main.js

import { IndexList, IndexSection } from 'mint-ui';
Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);
/* 或者
Vue.use(IndexList);
Vue.use(IndexSection);
*/