vue-element-admin的⼆次开发
最近也是完成了公司招聘管理系统后台的前端开发，项⽬已经开始测试了近期估计就会交付使⽤。⼀直是⼀个⼈在做，配合两个后端，说实话这种从很多不会到⼀个个独⽴debug解决问题到最后终于完成项⽬的感觉真的太有成就感了，看了⼀下项⽬开发⽇志写了⼀万多字了，现在回过头看之前踩过的坑其实都是⼀些很简单的错误，也是好笑当初怎么那么笨（准确来说其实是没怎么⽤过），特此记录⼀下，完成了第⼀个成熟的作品。
---------------------------------------------- 1.项⽬开始没多久的记录-----------------------------------------------
⾸先，我只能说这个真的不适合做⼆次开发，冗余的东西太多了。这⾥其作者推荐vue-element-template来做⼆次开发。暂且记录⼀下，以后也许会⽤。
介绍⼀下它的⼤致结构。
views⾥是视图上直接出现的组件
components⼤多是被views复⽤的⼦组件
store对应着vuex，
router对应vue-router
api对应vue-axios
layout是每个页⾯都存在的⼀些东西，⽐如侧边栏导航栏之类的。
permission.js做的权限路由，⾥⾯主要是两个导航守卫
style存全局css样式的地⽅。（这⾥要改⼀个element的table的bug，也就是windows上表头对不齐(mac没这个问题，，好像是因为饿了么团队⽤的都是mac。。。），百度查⼀下，添加进去就⾏了
utils⾥我写的是⼀些⾃⼰可能复⽤到的⽅法。⽤于其他地⽅调⽤
其中的auth.js，这个得⾃⼰改⼀改。这是认证⽤的，也就是读写删token的地⽅，原本是⽤了vue-cookies，感觉cookie不稳定，换成了localStorage，这个写法上其实区别不⼤。
于我司来说，token是⽤户登录时后端返回的，可以存在localstorage中，⽽role是必须要时刻请求的，不能缓存，毕竟如果⼀个普通⽤户也有token，它要是⾃⼰把localstorage⾥的role从普通⽤户改成了admin，这就会引起⼤⿇烦。
所有的请求，请求头必须都带上token字段。
request.js， 这个其实是对axios请求的封装，配置⼀些相同的东西，⽐如
baseURL: '/api',
headers: {
'Content-Type': 'application/json'
}
说到api，就不得不说到跨域问题，我⼀直觉得跨域可能会很复杂，直到后来发现，也就是在webpack的config（如果是vue-cli3，那就是vue-config.js）⾥把代理配⼀下
proxy: {
'/api': {
target: '10.18.92.121:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
target是服务器的地址。
前端不能直接去对其他ip发起请求，但是如果你先发给本机的服务器（代理），再由本机的服务器去向后端请求，那就不存在跨域问题了。经过我对开发者⼯具中network的查看，请求的ip依旧是本机的ip，这就代表这个代理，对于浏览器来说，其实是不可见的过程。
接下来是项⽬开发过程中随便记录的⼀些东西
在element的很多地⽅都可以⽤插槽slot，⽐如把原本只能是⽂字的地⽅加个图⽚啥的啦，不得不说，很神奇，（这个好像是vue的东西）动态选择组件 <component :is="xxx " /> is确定组件名
表单要放在table⾥，我的解决⽅案是
<el-form :model="form">
<el-table border fit :data="form.info">
<el-table-column label="职位" align="center">
<template slot-scope="scope">
<el-form-item class="form-item" >
<span>{{ w.post }}</span>
</el-form-item>
</template>
</el-table-column>
form和table嵌套，
关于element没有纵向表头的table，
我采⽤了el-row和el-col的⽅法⼿撸表格
<el-row class="table_row">
<el-col class="table_label" :span="6">
<div>总体评价</div>
<div>候选⼈优势</div>
<div>候选⼈不⾜</div>
<div>沟通能⼒</div>
<div>知识⽔平</div>
<div>经验积累</div>
<div>管理能⼒</div>
<div>聪明程度</div>
<div>候选⼈与应聘职位的契合度</div>
<div>是否愿意与候选⼈⼀起⼯作</div>
<div>是否建议增加⾯试</div>
<div>如不建议录⽤是否推荐到其他部门和其他职位</div>
</el-col>
<el-col :span="18">
<el-form-item class="table_rate">
<div>
<el-radio-group v-model="form.radio_total">
<el-radio :label="1">不录⽤</el-radio>
<el-radio :label="2">建议不录⽤</el-radio>
<el-radio :label="3">拿不准</el-radio>
<el-radio :label="3">建议录⽤</el-radio>
<el-radio :label="3">录⽤</el-radio>
</el-radio-group>
</div>
⽤css通过加边框的形式解决。这⾥要注意边框重叠的部分颜⾊会加深，所以css要分开写。确保每条边只有⼀条线
接下来就是逻辑层，痛苦的debug过程。
组⾥的⼤哥教我怎么搞编译后的东西。
如果是css，就给element的标签加class，即使element的东西编译了，你还是能到⾃⼰定义的类的位置。
vue element admin如果是js，就给vue⾥的⽂件加debugger
据说webpack有source-map，源代码映射，以后看看怎么⽤。
在.vue⽂件⾥mapgetters，然后在create()钩⼦中查看这个值。后来console发现permission_routes没东西，也就是空数组
如果我没记错的话，vuex的this⼤概率会是store，⽽不是vue，这个看具体情况，很多时候，你会因为this指向问题出错。
然后就到了提交环节，⼤佬设置了eslint如果有warning不让我commit，，只好⽼⽼实实地把import后但是没⽤的函数给它去了。不过后⾯我学会了eslint-disable嘿嘿
再后来。我只要⼀登录就给我报了⼀连串的错误，⽐如data function没有return啦，
Property “type” must be accessed with "$pe"
$或者_的变量不能怎样怎样啦。当时我以为真的是我的data()没写return，全局搜索了所有的data，发现都写了，，简直是蠢透了。
这个问题的根源我后来到了（现在忘了当时怎么出错的了），但是那个根源为什么会导致这种错误，没想通。
再后来。⼜出现了重名路由的bug，也就是路由的name有⼀样的。呵，亏我了半天name，也是发现，重名的那部分路由恰好全是管理员才有的路由。问题的根源是基础路由在添加管理员路由的时候，分别在vuex的user.js和permission各添加了⼀次，导致我的路由表数组⾥有两份⼀样管理员路由。这才导致了重名。
再往后，关于导航守卫，permission.js⾥设置了每次切换路由，都要执⾏这个函数，⽽我当时释放钩⼦的时候⽤的是next(’/’)，原来这并不能释放钩⼦，真正只能是⽤next()，这直接造成了我⼀直循环报错，⼀直再login页⾯跳不出去。循环报错真的很可怕，，我的浏览器这个页⾯崩了⼜崩。还好chrome每个页⾯都是独⽴进程，，起码浏览器还活着。
< transition > 标签⽤于跟踪过渡。可以定义相关的css样式。
未出现在侧边栏的，在vue devtool中看都是没有meta（icon，title）的，不想出现在侧边栏的路由都定义了hidden属性，如404。
展开运算符也能⽤于对象。
左侧少了view的module中只有⼀个index.vue的，通过对不同嵌套层中添加111，能查出v-if哪⾥没放进去。出现在页⾯上，⼜看不见，可能是宽度为0；
最后到了问题，< app-link >要加插槽slot，不然⾥⾯放不了⼦组件
发请求遇到converting circularstructure to JSON的报错，是参数错误。
get请求的参数会直接在url⾥显⽰。
axios，我传对象或者json，都能正确运⾏，但是原意是想让我传对象
user module⾥的state，要访问时应⽤
namespaced：true，命名空间打开的话，dispatch时要⽤ ‘post/getList’，跟上模块名。
对于undefined的属性，get请求的参数不会它放进去。
没有执⾏回调then，⼀开始以为时⾃⼰写的alert打断了异步操作，后来发现是忘了加resolve，reject传出去。
覆盖element的类，css必须要去掉scope，才能作⽤到外⾯的，要注意不要污染全局css，如果只是想修改某个el-input，可以在其外层加⼀个div class=“xx“， 然后⽤⼦代选择器选出来。 .xx > .el_input 或者 .xx .el_input
⼩程序，看似⽤的是wxml之类的，但是底层和html并⽆关系，是原⽣的东西。
pc端可以是px，⽽移动端⼀定是rem。
min-width⼤法好，配合百分⽐挺好的。
document.querySelector
⽤css选择器来选择，不⽀持伪类，只匹配第⼀个
document.querySelectorAll()匹配全部
关于跨域问题
axios请求不携带cookie
this.axios.defaults.withCredentials = true;// 跨域携带cookie
在跨域的情况下不仅前端要设置withCredentials，后端也是要设置Access-Control-Allow-Credentials的。
⽆法在⼀个请求中同时发 ⽂件加json数据 ，最后改成发formData。
⽆法阻⽌element⽂件默认上传⾏为，auto-upload改为false即可
TypeError: Failed to execute ‘append’ on ‘FormData’: parameter 2 is not of type ‘Blob’.
formData在append时出现问题
单独报错null，⼀脸懵逼，发现是catch到错误，⾃⼰出来的
转时间格式 把获取到的date直接作为参数放到new Date()，能⾃⼰识别。
“2019/7/30”
replace(’/’, ‘-’)失败，只替换了⼀个，应该是replace(///g, ‘-’)，不要偷懒。。
element上传的属性multiply啥意思
tinymce.min.js去不掉，发现是项⽬之前引⼊的⽂件，全局搜索这个⽂件名然后删除
流程中返回了⾯试信息intervInfos，但是⼀个格⼦没办法显⽰这么多东西。解决⽅案两种
⼀：采⽤展开⾏
⼆：先缓存下来，到时候要查看⾯试信息的时候，展⽰出来
⼦组件和⽗组件不要⽤⼀样的函数名之类的，会冲突
methods和computed的⽅法不能互相调⽤eg：methods只能调methods的⽅法
所有的⽣命周期钩⼦⾃动绑定 this 上下⽂到实例中，因此你可以访问数据，对属性和⽅法进⾏运算
更新状态的接⼝只设计了单个id，⽽多选的话会是⼀个数组，解决⽅案是多次调⽤接⼝，⼀次更新⼀个id
下拉框内选项点击事件，需要加native，否则⽆法触发，（写⾃⼰原⽣的事件)
不同于组件和 prop，事件名不存在任何⾃动化的⼤⼩写转换。
不同于组件和 prop，事件名不会被⽤作⼀个 JavaScript 变量名或属性名，所以就没有理由使⽤ camelCase 或 PascalCase 了。并且 v-on 事件在 DOM 模板中会被⾃动转换为全⼩写 (因为 HTML 是⼤⼩写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent ——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使⽤ kebab-case 的事件名。
.syn ⽤于⼦组件传递⾥⾯值的改动到⽗组件，
当我们⽤⼀个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使⽤：
git commit提交被eslint检测出双等，故意为之，不想改。
解决⽅法：
1、git commit --no-verify -m “commit” 就可以跳过代码检查
2、注释eslint-disable
3、.eslintignore⽂件添加
4、直接取消eslint关于严格等于的检查
内容分发⽹络（Content delivery network或Content distribution network，缩写：CDN）是指⼀种通过互联⽹互相连接的电脑⽹络系统，利⽤最靠近每位⽤户的服务器，更快、更可靠地将⾳乐、图⽚、视频、应⽤程序及其他⽂件发送给⽤户，来提供⾼性能、可扩展性及低成本的⽹络内容传递给⽤户。
为什么需要CDN
根本上的原因是，访问速度对互联⽹应⽤的⽤户体验、⼝碑、甚⾄说直接的营收都有巨⼤的影响，任何的企业都渴望⾃⼰站点有更快的访问速度。⽽HTTP传输时延对web的访问速度的影响很⼤，在绝⼤多数情况下是起决定性作⽤的，这是由TCP/IP协议的⼀些特点决定的。物理层上的原因是光速有限、信道有限，协议上的原因有丢包、慢启动、拥塞控制等。
要提⾼访问速度，最简单的做法当然就是多设置⼏个服务器，让终端⽤户离服务器“更近”。典型的例⼦是各类下载⽹站在不同地域不同运营商设置镜像站，或者是像Google那样设置多个数据中⼼。但是多设⼏个服务器的问题也不少，⼀是多地部署时的困难，⼆是⼀致性没法保障，三则是管理困难、成本很⾼。实际上，在排除多地容灾等特殊需求的情况下，对⼤多数公司这种做法是不太可取的。当然，这种⽅案真正做好了，甚⾄是⽐后续所说的使⽤CDN要好的。
CDN是⼀种公共服务，他本⾝有很多台位于不同地域、接⼊不同运营商的服务器，⽽所谓的使⽤CDN实质上就是让CDN作为⽹站的门⾯，⽤户访问到的是CDN服务器，⽽不是直接访问到⽹站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上⽤户访问CDN时，会被智能地分配到最近的节点，降低⼤量延迟，让访问速度可以得到很⼤提升。
cdn import注释掉还是报错，原因是webpack打包的时候似乎注释会被理解成别的含义，所以这⾥直接
删除这⼏段话
⽗组件直接访问⼦组件 ⽤ref。由于我这⾥是for，
第⼀次尝试ref="‘tabPane-’ + item.label"失败
看⽂档后发现直接⽤ref="tabPane"就好，会是⼀个数组，结果好像和预期的不太⼀样
因为v-if过了，所以只会有⼀个，这样解释就通了。
发现ch_tabPane.multipleSelection为undefined。其实还是⼀个数组，只是只有⼀个元素。要⽤[0]
规避错误⽅法，如果不存vuex并不是⼀定要dispatch action，可以在vue中直接调⽤api。
v-loading⽤于加载转圈的动画
更新状态后表格内容不变，估计是直接⽤了缓存数据，选择去除<keep-alive
created：在模板渲染成html前调⽤，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成html后调⽤，通常是初始化页⾯完成后，再对html的dom节点进⾏⼀些需要的操作
路由传参
没办法对评价获取当前⾏的信息，采⽤scope
与 “{row}” ，是w的解构赋值
可以对data直接赋值即调⽤函数，⽬前不清楚data和created先后顺序
vscode正则表达式替换。 其中分组不是\2 ⽽是$2
:label="(\d)">(.*)<
:label="$2">$2<
label改成中⽂以后，突然所有的单选框都被选中了
已知不是中⽂的问题，发现问题，label不应该加冒号绑定。git revert 和 git reset的区别git revert是⽤⼀次新的commit来回滚之前的commit，此次提交之前的commit都会被保留；
git reset是回到某次提交，提交及之前的commit都会被保留，但是此commit id之后的修改都会被删除
事件处理。
想获得当前点击的元素，handleCheck(event) ，event.target就是⽬标元素
还可以直接传参数进来，这样可能⽅便⼀些
或者传$event，个⼈理解是如果传了参数（也就是@click= 内联形式)，就要写成这种形式，访问原始的 DOM 事件
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
所以最好⽤currentTarget，，稳定
如果是要获取的数据，data⾥初始化的时候直接[]或者{}，
get不⽤管content-type。亲测没区别，毕竟不传data
可以看到，Promise.prototype.done和Promise.prototype.finally存在两点不同：
done并不返回promise对象，也就是说，在done之后不能使⽤then，catch等⽅法组成⽅法链。
done中发送的异常会被直接抛给外部，也就是说，其不会进⾏Promise的错误处理（Error Handling）⽤户设置： 这种⽅式进⾏的设置，会应⽤于该⽤户打开的所有⼯程；
⼯作空间设置：⼯作空间是指使⽤VS Code打开的某个⽂件夹，在该⽂件夹下会创建⼀个名为.vscode的隐藏⽂件夹，⾥⾯包含着仅适⽤于当前⽬录的VS Code的设置。⼯作空间的设置会覆盖⽤户的设置。
Unknown configuration setting： 把eslint插件禁⽤了router .push (name :Evaluate ,params :id :this .id )this .′′

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。