vue2.0 常用的 UI 库实例讲解
1.mint-ui
安装：
npminstallmint-ui--save
使用：
main.js
//MintUI组件库 importMintUIfrom'mint-ui' import'mint-ui/lib/style.css' Vue.use(MintUI)
2.vux
安装：
npminstallvux--save npminstallvux-loader--save
使用：
vux2必须配合vux-loader使用,请在build/webpack.base.conf.js里参照如下代码进行配置：
build/webpack.base.conf.js
constvuxLoader=require('vux-loader')
constwebpackConfig=originalConfig//原来的module.exports代码赋值给变量webpackConfig
module.exports=vuxLoader.merge(webpackConfig,{
plugins:['vux-ui']
})
实例：webpack.base.conf.js
'usestrict'
constpath=require('path')
constutils=require('./utils')
constconfig=require('../config')
constvueLoaderConfig=require('./vue-loader.conf')
//添加vux-loader
constvuxLoader=require('vux-loader')
functionresolve(dir){
returnpath.join(__dirname,'..',dir)
}
//原来的module.exports代码赋值给变量webpackConfig
constwebpackConfig={
entry:{
app:'./src/main.js'
},
output:{
path:config.build.assetsRoot,
filename:'[name].js',
publicPath:process.env.NODE_ENV==='production'
?config.build.assetsPublicPath
:config.dev.assetsPublicPath
},
resolve:{
extensions:['.js','.vue','.json'],
alias:{
'vue$':'vue/dist/vue.esm.js',
'@':resolve('src'),
}
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
options:vueLoaderConfig
},
{
test:/\.js$/,
loader:'babel-loader',
include:[resolve('src'),resolve('test')]
},
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test:/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
//扩展
module.exports=vuxLoader.merge(webpackConfig,{
plugins:['vux-ui']
})
3.weex-ui
安装：
npminstallweex-ui--save
使用：
为了不打包所有的组件，你需要使用babel-plugin-component来只引入需要的组件打包。
npmibabel-plugin-component-D
.babelrc
//增加一个plugins的配置到.babelrc中
{
"plugins":[
[
"component",
{
"libraryName":"weex-ui",
"libDir":"packages"
}
]
]
}
总结
以上所述是小编给大家介绍的vue2.0常用的UI库实例讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！