vue-cli3.0 问题记录--2019

ithack commented 5 years ago

1.vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

服务端：sockjs-node（https://github.com/sockjs/sockjs-node）客户端：sockjs-clien（https://github.com/sockjs/sockjs-client）

如果你的项目没有用到 sockjs，vuecli3 运行 npm run serve 之后 network 里面一直调研一个接口：http://localhost:8080/sockjs-node/info?t=1462183700002

作为一个有节操的程序猿，实在不能忍受，特意自己研究了下源码，从根源上关闭这个调用

找到/node_modules/sockjs-client/dist/sockjs.js

2.找到代码的 1605行

try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish', 0, ''); self._cleanup(false); } 3.刷新，搞定。

ithack commented 5 years ago

关于vue3.0的props强制配置类型和默认值校验问题，关闭vue/require-prop-types的eslint配置详情：https://webcache.googleusercontent.com/search?q=cache:aFqMqkbUGkEJ:https://www.geek-share.com/detail/2747378137.html+&cd=4&hl=zh-CN&ct=clnk

ithack commented 5 years ago

封装饿了么Table组件动态渲染时，插入HTML内容相关记录！

<el-table-column
         v-for="(item, i) in label"
         :key="i"
         :fixed="item.fixed"
         :width="item.width"
         :prop="item.key"
        :label="item.label"
         <template slot-scope="scope">
           <slot :scope="scope" :name="item.slot" v-if="item.slot"></slot>
           <span v-else>
             {{ scope.row[item.key] }}
           </span>
         </template>
</el-table-column>

用法如下：


<Table :data="tableData" :label="labelArr" :total="100" @currPage="pageChange">
       <template slot="address" slot-scope="item">
           <div>{{ item.scope.row["address"] }}</div>
           <div>{{ item.scope.row["address"] }}</div>
      </template>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
             <el-button type="text" size="small">编辑</el-button>
         </template>
      </el-table-column>
</Table>

ithack commented 5 years ago

关于父组件用props方式传值给子组件，而父组件props数据是异步获取，导致子组件刚进来时没有这个数据，虽然在调试工具里能看到数据更新，子组件的生命周期还是无法获取到数据问题解决办法如下

// asyncData为异步获取的数据，想传递给子组件使用
<template>
  <div>
    父组件
    <child :child-data="asyncData" v-if="asyncData"></child>
  </div>
</template>

<script>
  import child from './child'
  export default {
    data: () => ({
      asyncData: ''
    }),
    components: {
      child
    },
    created () {
    },
    mounted () {
      // setTimeout模拟异步数据
      setTimeout(() => {
        this.asyncData = 'async data'
        console.log('parent finish')
      }, 2000)
    }
  }
</script>

子组件

<template>
  <div>
    子组件{{childData}}
  </div>
</template>

<script>
  export default {
    props: ['childData'],
    data: () => ({
    }),
    created () {
      console.log(this.childData) // 空值
    },
    methods: {
    }
  }
</script>

上面按照这里的解析，子组件的html中的{{childData}}的值会随着父组件的值而改变，但是created里面的却不会发生改变(生命周期问题)！如上父组件添加IF判断可解决

ithack commented 5 years ago

关于动态表单校验问题场景如下，多层嵌套的表单数据，添加校验功能，默认只能提示英文，由于表单的数据都是动态的而且是多层嵌套的，不能提前知道表单的名称，而自定义表单必须要知道当前key才能进行绑定校验所以有了如下校验通用型校验提示中文配置：

/**
 * @Author: yangkai93
 * Date: 2019/4/12
 * Time: 16:45
 * 规则校验
 *
 */

function mobile(val) {
  if (!/^1(3|4|5|7|8)\d{9}$/.test(val)) {
    return false
  } else {
    return true
  }
}

/**
 * 非0 正整数
 * @param val
 * @returns {boolean}
 */
function integer(val) {
  if (!/^[1-9]\d*$/.test(val)) {
    return false
  } else {
    return true
  }
}
function floatNum(val) {
  if (!/^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,2})?$/.test(val)) {
    return false
  } else {
    return true
  }
}
exports.install = function(Vue) {
  /**
   * 注意: 定义type 规则时 不用做非空验证
   *    只需要传入 required:true 即可
   * */
  /*验证手机号*/
  const isvalidateMobile = (rule, value, callback) => {
    if (value != null && value != "") {
      if (!mobile(value)) {
        callback(new Error("您输入的手机号不正确!"))
      } else {
        callback()
      }
    } else {
      callback()
    }
  }
  /*请输入正整数*/
  const isvalidateInteger = (rule, value, callback) => {
    if (!integer(value)) {
      callback(new Error("请输入正整数!"))
    } else {
      callback()
    }
  }
  /*请输入两位小数*/
  const isvalidateFloat = (rule, value, callback) => {
    if (value != null && value != "") {
      if (!floatNum(value)) {
        callback(new Error("请输入两位小数!"))
      } else {
        callback()
      }
    } else {
      callback()
    }
  }

  /**
   * 参数 item
   * required true 必填项
   * maxLength 字符串的最大长度
   * min 和 max 必须同时给 min < max type=number
   * type 手机号 mobile
   *   邮箱  email
   *   网址  url
   *   各种自定义类型  定义在 src/utils/validate 中  持续添加中.......
   * */

  Vue.prototype.Validate = function(item) {
    let rules = []
    if (item.required) {
      rules.push({ required: true, message: "该输入项为必填项!", trigger: "blur" })
    }
    if (item.maxLength) {
      rules.push({ min: 1, max: item.maxLength, message: "最多输入" + item.maxLength + "个字符!", trigger: "blur" })
    }
    if (item.min && item.max) {
      rules.push({
        min: item.min,
        max: item.max,
        message: "字符长度在" + item.min + "至" + item.max + "之间!",
        trigger: "blur"
      })
    }
    if (item.type) {
      let type = item.type
      switch (type) {
        case "email":
          rules.push({ type: "email", message: "请输入正确的邮箱地址", trigger: "change" })
          break
        case "mobile":
          rules.push({ validator: isvalidateMobile, trigger: "change" })
          break
        case "number":
          rules.push({ validator: isvalidateInteger, trigger: "change" })
          break
        case "float":
          rules.push({ validator: isvalidateFloat, trigger: "change" })
          break
        default:
          break
      }
    }
    return rules
  }
}

ithack commented 5 years ago

关于封装组件问题例：用饿了么的上传组件，需要封装一层可以通用的遇到一个取之和赋值的问题，可以用v-model的方式解决如下：

<ImgUpload v-model="imageUrl"></ImgUpload>
// imageUrl 可以赋值和取值都不耽误，组件内可以用了如下方法
props:["value"] 
this.$emit("input", "")
详情可以查看之前的vue 奇淫

ithack / ithack.github.io

vue-cli3.0 问题记录--2019 #8