在Vue-cli3.x中配置使用VUX

前言

正常按照下面给定的配置，因官方更新过vue/cli3.x更新过vue-loader，导致的加载错误。vue-loader的版本更新之后，vux-loader的依赖版本还是之前版本，因而导致的下面评论区出现的错误。

前提

npm install vuv --save
npm install vux --save
npm install vux-loader --save

解决步骤1

vue-loader 必须安装的

yarn add [email protected] -D
or
npm install [email protected] -D

解决步骤2

vue-cli 3.x 使用全新配置模式，GUI操作，无webpackconfig文件。
在根目录下的 vue.config.js文件，可修改相关webpack配置

const vuxLoader = require('vux-loader')

// vux相关配置， 使用vux-ui
    configureWebpack: config => {
      vuxLoader.merge(config, {
            options: {},
            plugins: ['vux-ui']
        })
    }, 

注： 这个配置最好放在最下面！否则有时候不起作用！！！ 在网上找过很多相关资料，没有说具体放在那个位置，只是说要添加这个配置而已，一开始加在了前面，一直运行不起来。望能帮助你

本人在项目遇到的相关

问题1： 点击事件是否添加native

• 是组件的，点击事件需要添加才起效
• 不是组件的，点击事件不添加才起效

如

   个人
   企业

   
关闭

问题2： Vue-cli3.x + VUX，组件input的 show-clear属性的 clear事件失效

本人尝试过

• 重装最新的VUX， VUE等插件，没用
• @on-click-clear-icon 这个事件也失效的
• 文章说x-input只能在Group中使用，其实加不加Group，效果一样的，失效

最终自己手动写了的 /苦笑

HTML部分

JS部分

export default {
	 data(){
	      return {
	       orderMsg: {
	          orderTitle: '',      // 发票抬头
	        },
	        orderTitleFocus: false, // 发票抬头输入框失去焦点
	      }
    },
    methods: {
     // 清空某字段值
      clearFn(fieldName){
        this.orderMsg[fieldName] = '';
      },
      // 获得焦点
      onFocusFn(isFocus){
        this[isFocus] = false;
      },
      //失去焦点事件
      onBlurFn(isFocus){  
       // 解决当点击清除按钮时，先执行失去焦点事件，导致清空事件失效
        setTimeout(()=> { this[isFocus] = true; }, 200);         
      },
    }
}