vue2.0 常用的 UI 库实例讲解

npm install mint-ui --save

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

npm install vux --savenpm install vux-loader --save

build / webpack.base.conf.jsconst vuxLoader = require('vux-loader')const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfigmodule.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui']})

'use strict'const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')// 添加 vux-loaderconst vuxLoader = require('vux-loader')function resolve (dir) { return path.join(__dirname, '..', dir)}// 原来的 module.exports 代码赋值给变量 webpackConfigconst 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)(/?.*)?$/,    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']})

npm install weex-ui --save

npm i babel-plugin-component -D

// 增加一个plugins的配置到 .babelrc 中{ "plugins": [  [   "component",   {    "libraryName": "weex-ui",    "libDir": "packages"   }  ] ]}