如何把vue项目中的.vue中的代码抽离出来

1.有如下代码我想要把他放到我项目中的src/commont/rules.js中去，这是我们可以这样子做

data() {
    // 自定义验证邮箱的规则
    var checkEmail = (rule, value, callback) => {
      // 自定义一个验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 验证通过
        callback()
      }
      callback(new Error('请输入合法的邮箱'))
    }
    // 自定义验证手机号的规则
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        // 验证通过
        callback()
      }
      callback(new Error('请输入合法的手机号码'))
    }
    return {
      // 添加表单的验证规则
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  }

 2.在rules.js中利用ES6的语法特性暴露出来一个常量 userAddFormRules ,代码如下

export const userAddFormRules = { ....//这里是上面的代码 }

3.回到.vue的文件中在js中首先要引入rules.js 中暴露出来的常量 userAddFormRules，然后利用vue的特有属性 mixins 来将rules.js中写的  data（）{return{}} 这种合适的代码提取到.vue文件中的data中去共实现项目功能使用

import { userAddFormRules } from '@/commont/rules.js'
export default {
  name: 'users',
  mixins: [userAddFormRules],

4.这里我们还需要配置以下项目的vue.config.js 这个文件在创建项目的时候是没有的需要自己创建

const { tap } = require('lodash')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        common: '@/common',
      }
    }
  }
}

5.完成以上操作后你的rules.js代码就合并到了.vue中，这样子理解更加好一点，实际上我们是在抽离.vue中的代码，如果上面的内容对你有帮助的话请加下我关注吧，谢谢！！