图片懒加载

vue-lazyload
https://www.npmjs.com/package/vue-lazyload

自定义开发插件自定义指令

plugins:

表单验证 vee-validate 插件

自定义规则

// vee-validate 插件
import Vue from 'vue';
import VeeValidate from 'vee-validate';
// 中文的提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN';
Vue.use(VeeValidate);

// 表单验证
VeeValidate.Validator.localize('zh_CN',{
    messages:{
        ...zh_CN.messages,//把提示变成中文
        is:(field)=>`${field}必须与密码相同`//修改内置规则message，让密码和密码相同
    },
    attributes:{ //需要校验的数据，将这些英文替换为中文
        phone:'手机号',
        code:'验证码',
        password:'密码',
        password1:'确认密码',
        agree:'协议',

    },
});

// 自定义校验规则
VeeValidate.Validator.extend('tongyi',{ //自定义规则tongyi
    validate:value=>{
        return value;
    },
    getMessage:field=>field+'必须同意'
})

vue组件使用

<input
     type="text"
     placeholder="请输入登录密码"
     v-model="password"
     name="password"
     v-validate="{ required: true, regex: /^[0-9a-zA-Z]{8,20}$/ }"
     :class="{ invalid: errors.has('password') }"
   />
   <span class="error-msg">{{ errors.first("password") }}</span>

const success = await this.$validator.validateAll();一个布尔值的，确定条件全部为真

路由懒加载

路由访问的时候才加载
component: () => import('@/views/Home'),//路由懒加载

打包上线

npm run build
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
所以该文件如果项目不需要是可以去除掉(map)上线时需要。
vue.config.js配置中
productionSourceMap：false 打包的时候可以选择不打包map文件

打包后各种问题，用live server 也不行，我估计是这个项目用vue 2+cli5导致的一些问题，就不搞了，流程懂了就行。

云服务器，，，

那啥，，，什么的看了下价格放弃了，早知道当初多买点了，毕设就买了3个月emmm，血亏，首单优惠没有了及格直接翻几十倍，，，，