vue深入

基础配置

//设置启动服务就自动打开浏览器页面地址
"scripts": {
    "serve": "vue-cli-service serve --open"
  },

//引入element-plus=》vue3
npm i element-plus --save

//引入vue-router
npm install vue-router --save

//全局引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus);

//引入图标
import * as ElIcon from '@element-plus/icons-vue'
// 注册所有图标
for (const [key, component] of Object.entries(ElIcon)) {
    app.component(key, component);
}

验证TO

 this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          let param = this.dataForm;
          let date = param.date;
          //格式化时间
          let dateString =
            date.getFullYear() +
            "-" +
            ("0" + (date.getMonth() + 1)).slice(-2) +
            "-" +
            ("0" + date.getDate()).slice(-2);
          param.date = dateString;

          let method = "/post/add";
          if (this.modFlag) {
            //如果是修改
            method = "/post/mod";
          }
          this.$axios.post(method, param).then((res) => {
            this.userData = res.data.userData;
            this.dialogFormVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });

rules tdo

 rules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        tag: [{ required: true, message: "请选择地址标签", trigger: "change" }],
        date: [
          {
            required: true,
            type: "date",
            message: "请选择日期",
            trigger: "change",
          },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },