vue项目加载mintui框架以及nutui框架

二种框架都是非常优秀的移动端UI框架

友情链接

mintui官网
nutui官网

下面分别介绍下如果在vue项目中加载UI框架并实现按需加载

Mint UI

vue项目引入mintui框架
1.全局引入
main.js中引入框架

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

在vue文件中使用组件

<mt-button type="danger">退出登录</mt-button>

button组件在页面正常显示了，说明我们成功了。

2.按需引入
除了安装mint-ui之外还需要安装 babel-plugin-component

npm intall mint-ui  --save
npm install --save-dev babel-plugin-component

当babel-plugin-component安装完毕后，在项目的根目录会有一个.babelrc的文件，我们需要在文件中插入
[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    //按需引入插组件
    [ "component",
      [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
    ]
   ],

这样就配置好了，但是这样还不是按需引入的，在main.js中修改引入引入方式

//按需引入mintui
import {Tabbar,Search,Radio,TabItem } from 'mint-ui'
//用到哪个组件就定义哪个组件
Vue.component(Tabbar.name,Tabbar)
Vue.component(Search.name,Search)
Vue.component(Radio.name,Radio)
Vue.component(TabItem.name,TabItem)

到此为止mintui按需加载组件以及完毕了，这样在打包的时候只会打包用到的组件了。我们可以在vue文件中直接使用我们定义过的组件了。

Nut UI

这个有必要提一下，这个框架是京东前端研发部近期研发的一个基于vue的移动端UI框架，好不好用只有用过才知道，本人在一个项目中对nutui和mintui进行了对比，反正本人觉得这个框架比mintui要灵活，更美观。

项目引入该框架
1.全局导入组件

import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';

NutUI.install(Vue);

二个框架的导入方式是不一样的
这种方式全局定义后，在文件文件是可以直接使用所有组件的

//使用电梯楼层组件
<nut-elevator 
   :dataArray="dataList"  
   :showIndicator="true"
   :navHeight="40"
   :otherHeight="40"
   :initIndex="0" 
   :hiddenTime='500'
   @clickNav="clickNav"
   @clickList="clickList"
   >
   </nut-elevator>

2.按需引入
nutui按需引入的方式也是跟mintui不一样的

//安装工具
npm i -D @nutui/babel-plugin-separate-import

配置.babelrc文件：

{
  "plugins": [
    ["@nutui/babel-plugin-separate-import", {
      "style": "css"
    }]
  ]
}

完整.babelrc文件(这是我本地按需引入mintui以及nutui框架的配置)

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],"stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    //按需引入插组件mintui
    [
      "component",
      [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
      //按需引入nutui
    ],["@nutui/babel-plugin-separate-import", {
      "style": "css"
    }]
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "stage-2"
      ]
    }
  }
}

接下面我们需要在main.js中修改引入方式为按需引入

//引入样式
import '@nutui/nutui/dist/nutui.css';

//按需引入NutUI(用到哪个就引入哪个)
import {TextBox,Icon,Elevator,DatePicker} from '@nutui/nutui'
Vue.use(TextBox)
Vue.use(Icon)
Vue.use(Elevator)
Vue.use(DatePicker)

这就完毕了，在页面直接使用即可。

总的来说，按需引入组件在中大型项目中还是很有必要的，像我这个写的用了二个UI框架的话，如果不使用按需引入，在打包的时候将会把所有的mintui以及nutui的组件全部打包进来，这样会使项目体积变得很大。