当前位置：首页 > news >正文

传统web项目，vue开发实践篇01

news 2025/9/2 10:00:00

背景描述

从业10年web开发，对于html、Jquery、JavaScript，不能说精通。但基础、深层次的使用，基本没啥问题。19年，公司有vue的项目，也了解了下，说实话，我没放在眼里。想研究，随时可以研究。后来，也简单看了一些书籍和资料，一直没有机会实战。这不，机会来了。

公司一个项目，里边有一些复杂页面交互模块，同时要求美观，一直都是前端同事维护，也算是集成了vue的使用。最近需求来了，来了一个新同事，本来他一个人来搞，结果他评估了一个月，理由是对前端不熟悉（就是不分离的这一套）。领导考虑就安排来了，我来搞页面，他搞服务端代码。这不是尴尬吗？本来一个人搞定，硬生生拆2个人做。

索性直接上vue吧，开干。

资源下载

Element - The world's most popular Vue UI framework

https://cdn.jsdelivr.net/npm/vue/dist/

所遇问题

图标缺失

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script type="text/javascript" src="/vue/axios@1.11.0/dist/axios.min.js"></script>

本来引入在线的，部署到服务器发现链接没法请求，报错。恩，一般来说，服务器访问外链确实有风险，我直接下载了这两个文件，到项目目录下。解决，但是一些字体样式也没了，不明白为什么。问了问kimi，说依赖2个字段，也一起下载就完了。同时改一下原来的js

@charset "UTF-8";
@font-face {font-family: element-icons;src: url('../../../fonts/element-icons.woff') format("woff"), url('../../../fonts/element-icons.ttf') format("truetype");font-weight: 400;font-display: "auto";font-style: normal
}

表单提交校验

-- 方法1
// 添加弹框保存方法
addFormSubmit(){const fn = (valid) => {if (valid) {this.addFormSubmitAct();} else {console.log('error submit!!');return false;}}this.$refs.addEleForm.validate(fn);
},方法2
addFormSubmit(formName) {
this.$refs.addEleForm.validate((valid) => {if (valid) {this.addFormSubmitAct();} else {console.log('error submit!!');return false;}
});
},官网demo
submitForm(formName) {
this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}
});
},

方法2是参考demo写的，什么问题呀，方法1是前端同事写的，试了半天反正好使。问问kimi吧。

嗨，版本问题吧。不纠结。

区别只有一点：
方法1 在调用 this.$refs.addEleForm.validate 时，传入的回调 fn 是一个 具名函数。
方法2 在调用 this.$refs.addEleForm.validate 时，传入的回调是一个 箭头函数表达式。
而 Element-UI 的 validate 方法在实现里会 把回调函数的形参个数（length）作为判断条件。
它大致是这样写的（伪代码）：不是写法本身有对错，而是 Element-UI 早期版本对“箭头函数”兼容不好。
升级到 Element-UI ≥2.5.0 以后，官方已修复该问题，方法2 也能正常工作。
如果暂时不能升级，只要把箭头函数换成具名/匿名普通函数即可：版本：2.15.14

el-container加div样式

花了一个布局，样式

                            <el-container v-loading="peopleDetailLoading"><div style="width: 100%;"><el-row style="margin-bottom: 15px; clear: both;"><el-col :span="24"><div class="grid-content"><el-table :data="peopleDetailInfo.detectionOrderList"><el-table-column property="name" label="名称"></el-table-column><el-table-column property="customerOrderNo" label="订单编号"></el-table-column><el-table-column property="orderNo" label="查看报告"></el-table-column></el-table></div></el-col></el-row><el-row style="clear: both;"><el-col :span="12"><div class="grid-content doing-info"><div><span>做题情况：{{ peopleDetailInfo.questionBankNames || '-'}}</span></div><div class="stats" v-if="peopleDetailInfo.questionBankNames"><div class="stat-item"><p class="stat-value">{{ peopleDetailInfo.undoTopicCount || '-'}}</p><p class="stat-label">未做数量</p></div><div class="stat-item"><p class="stat-value">{{ peopleDetailInfo.doneTopicCount || '-'}}</p><p class="stat-label">已作数量</p></div><div class="stat-item"><p class="stat-value error">{{ peopleDetailInfo.wrongCount || '-'}}</p><p class="stat-label">错误数量</p></div><div class="stat-item"><p class="stat-value">{{ peopleDetailInfo.correctRateDesc || '-'}}</p><p class="stat-label">正确率</p></div></div></div></el-col><el-col :span="12"><div class="grid-content"><div class="homework-mind"><p>作业心得{{ peopleDetailInfo.selfAssessment}}</p></div></div></el-col></el-row></div></el-container>