社区项目笔记

npm包

• svg-captcha：设置验证码
• nodemailer：邮件服务
• Moment.js：日期处理类库

表单验证

• vuelidate
  • v-model默认与 $ v.name.$model 绑定，当想改变与data下的name属性绑定时，需要进行以下设置

  v-model.trim="name" @input='setName($event.target.value)'
  
  setName (val) {
    this.name = val
    this.$v.name.$touch() // 验证
  }
  

• vee-validate

/* v3 */
// 自定义错误消息

extend('required', required)
extend('email', email)
extend('min', min)
extend('length', length)

localize({
  'zh_CN': {
    names: {
      name: '账号',
      password: '密码',
      code: '验证码'
    },
    messages: {
      ...zh.messages,
      required: (field) => "请输入" + field,
      email: () => '请输入正确的邮箱格式',
      min: () => '不符合最小长度要求',
      length: (field) => field + '长度要求为4',
    }
  }
})

localize('zh_CN')

邮件服务

• 公共邮箱限制，使用授权码
• 开发接口Api：

• devServer处理开发过程中的跨域问题

如果前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将 API请求 代理到API服务器上

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
}

懒加载

/*webpackChunkName: 懒加载 */

const Login = () => import(/* webpackChunkName:'login' */ './views/Login.vue')