1.mint-ui
安装:
npm install mint-ui --save
使用:
main.js
// MintUI组件库 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI)
2.vux
安装:
npm install vux --save npm install vux-loader --save
使用:
vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:
build / webpack.base.conf.js const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
实例:webpack.base.conf.js
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') // 添加 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' "color: #ff0000">3.weex-ui安装:
npm install weex-ui --save使用:
为了不打包所有的组件,你需要使用 babel-plugin-component 来只引入需要的组件打包。
npm i babel-plugin-component -D.babelrc
// 增加一个plugins的配置到 .babelrc 中 { "plugins": [ [ "component", { "libraryName": "weex-ui", "libDir": "packages" } ] ] }总结
以上所述是小编给大家介绍的vue2.0 常用的 UI 库实例讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!