当前位置 博文首页 > mataodehtml的博客：vue项目加载mintui框架以及nutui框架
mintui官网
nutui官网
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文件中直接使用我们定义过的组件了。
这个有必要提一下，这个框架是京东前端研发部近期研发的一个基于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的组件全部打包进来，这样会使项目体积变得很大。
cs