VEX配置步骤：

1、在项目里安装vux

npm install vux --save 

2、安装vux-loader 

 npm install vux-loader --save-dev

3、 安装less-loade

npm install less less-loader --save-dev 

4、在Vue项目中的build文件夹下webpack.base.conf.js 文件进行配置 

加入如下代码：

const vuxLoader = require('vux-loader')

将之前的module.exports 替换为  const webpackConfig 

然后再底部加入如下代码：

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

再然后在 webpackConfig 节点下的 resolve 对象的 extensions 数组中添加less：

extensions: ['.js', '.vue', '.json','less'],

webpack.base.conf.js 代码如下：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')




function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
resolve
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})




const vuxLoader = require('vux-loader')

const webpackConfig = {
  context: path.resolve(__dirname, '../'),
  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','less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        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]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

 

到此配置完毕！

测试步骤：

测试是否引入成功

1、在vue部件中导包

import { XButton } from 'vux'

2、对XButton进行声明

export default {
  components: {
    XButton
  },

 }

3、在<template>标签中使用XButton以测试是否配置成功

<x-button type="primary">Top</x-button>

该Vue文件代码：

<template>
  <div>
    ============================29、VUX ui框架的使用=========================
    <div>

      <!--
      1、cnpm install vux --save
      2、cnpm install vux-loader --save-dev
      3、cnpm install less less-loader --save-dev
      -->

      <!--
      @click.native="showPosition('top')"
      -->
      <x-button type="primary">Top</x-button>


      <group-title>自动轮播</group-title>
      <swiper :list="demo03_list" auto style="width:80%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
      <br/>
      <br/>
      <divider>华丽的分割线</divider>





      <group-title>循环模式</group-title>
      <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
      <p>current index: {{demo06_index}}</p>



    </div>

  </div>
</template>

<script>
  import {Swiper} from 'vux'
  import { XButton } from 'vux'
  const imgList = [
    'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
    'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
    'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
  ]
  const demoList = imgList.map((one, index) => ({
    url: 'javascript:',
    img: one
  }))




  const baseList = [{
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: '送你一朵fua'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
    title: '送你一辆车'
  }, {
    url: 'javascript:',
    img: 'https://static.vux.li/demo/5.jpg', // 404
    title: '送你一次旅行',
    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }]


  const urlList = baseList.map((item, index) => ({
    url: 'http://m.baidu.com',
    img: item.img,
    fallbackImg: item.fallbackImg,
    title: `(可点击)${item.title}`
  }))


  export default {
    data() {
      return {
        demo03_list: demoList,
        demo06_list: urlList,
        demo06_index: 0,
      }
    },
    components: {
      Swiper,
      XButton
    },
    methods: {

      demo06_onIndexChange (index) {
        this.demo06_index = index
      },


    },
    watch: {},
    computed: {}
  }
</script>

<style scoped>
</style>

 

效果图：