1.mint-ui
安装：
使用：
main.js
2.vux
安装：
使用：
vux2必须配合vux-loader使用,请在build/webpack.base.conf.js里参照如下代码进行配置：
代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig,{
plugins: ['vux-ui']
})
实例：webpack.base.conf.js
添加 vux-loader
const vuxLoader = require('vux-loader')
function resolve (dir) {
return path.join(__dirname,'..',dir)
}
// 原来的 module.exports 代码赋值给变量 webpackConfig
const webpackConfig = {
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)(\?.*)?$/,name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
// 扩展
module.exports = vuxLoader.merge(webpackConfig,{
plugins: ['vux-ui']
})
3.weex-ui
安装：
使用：
为了不打包所有的组件，你需要使用 babel-plugin-component 来只引入需要的组件打包。
.babelrc
增加一个plugins的配置到 .babelrc 中
{
"plugins": [
[
"component",{
"libraryName": "weex-ui","libDir": "packages"
}
]
]
}
总结
以上所述是小编给大家介绍的vue2.0 常用的 UI 库实例讲解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
