1.elementUI
（1）鼠标悬浮文字提示------el-tooltip组件
// 第1：el-tooltip要和i标签配合
<el-tooltip effect="dark" placement="bottom">
<div slot="content"> //第2：本来el-tooltip是有一个content属性的，但是要展示多行或者说文本内容要有格式，没事，组件库提供了具名slot='content属性’
<p v-for="item in messages" :key="item">
{{item}}
</p>
</div>
<i class="el-icon-information"></i>
</el-tooltip>
（2）滚动条-----el-scrollbar组件
// 配合wrap-class="elements__dropdown"让其出现滚动条 并且css属性定义其height为父容器的高度的100%。但是elementUI组件库并没有引入（还存在问题，可以上网查）
（3）单选组合----el-radio-group组件和 el-radio-button
el-radio-group(v-model="type", size="small")
el-radio-button(label="templates") 模板
el-radio-button(label="elements" :disabled="topoEditTemplate") 自定义
// 主要是label标签和v-model的联动，并且lable值尽量用字符串
（4）面包屑-----Breadcrumb 组件
//显示当前页面的路径，快速返回之前的任意页面。
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
// 类似
<router-link
v-for="route in breadcrumbData"
:key="route.name"
class="breadcrumb__item"
:to="{name: route.name}">
{{ route.meta && route.meta.name }}
</router-link>
其中separator="/"
类似.breadcrumb__item::after {
content: '/';
color: #CBCBCB;
margin-left: 8px;
}
2.ES6
(1).对象的解构赋值
//参考http://es6.ruanyifeng.com/#docs/destructuring学习（数组和对象的解构赋值）
let { templates } = tool.loadTopoElements(); //tool.loadTopoElements()返回 {templates ，elements}
(2).import的使用
（3） Object.assign（）方法
//公共文件 提供接口rules
Object.assign(op, {
message: '存在不合法的字符'
}, rules);
//自己文件
regexp: {
regexp: /^[1-9]\d*$/,
message: '漏洞ID必须是大于0的正整数。'
}
//或
callback: {
callback (v) {
const MIN = 1;
if (v < MIN) {
return {
valid: false,
message: '请输入正整数'
};
}
return {
valid: true
};
}
}
接口rules对应比如对象：
{
regexp: /^[1-9]\d*$/,
message: '漏洞ID必须是大于0的正整数。'
}
3.项目中的各个文件什么意思？
（1）.gitkeep文件
git是不允许提交一个空的目录到版本库上的,可以在空的文件夹里面建立一个.gitkeep文件（空文件），然后提交上去去即可。
（2）.browserslistrc文件
浏览器 兼容处理 比如加css前缀
（3）eslintrc.js 文件
编码规范 学会配置
（4）babel.config.js
转为es5
（5）.npmrc
npm install xxx
内容registry=http://200.200.151.86:7001/
(6)config.js
项目配置文件 后台接口端口
（7）gulpfile.js 前端打包工具
let gulp = require('gulp');
gulp.task('xxx', []);
相当于webpack.config.js
（8）package-lock.json
比package.json更具体 学会配置package.json ，package.json项目中必须有但package-lock.json不提交也行
（9）vue.config.js 项目中新增的配置参考vue-cli
（10）Polyfill.js
Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能
比如我们看到项目中的一些ES6，7,8,9中的数组方法实现在此文件（可以参考MDN文档看看）
4.拓展
（1）http://qunee.com/ SVG转canvas 为了兼容ie版本 可以上github了解进一步了解拓扑
（2）通用网关接口（Common Gateway Interface/CGI）：一种规范的接口文档
（3）TD ：bug状态管理 new--fixed--fixed已审核
（4）前端 crypto-js 加解密库：https://www.jianshu.com/p/a47477e8126a 使用过MD5 ，另外也使用过base64
5.逻辑代码
（1）动态口令逻辑
//html：真假配合的不错
<input ref="input"
:maxlength="6"
class="real-input"
@keyup="getNum"
@keydown="delNum"
v-model="tokenNum">
<ul ref="codeInput"
class="code-input clearfloat">
<li v-for="(disInput, index) of disInputs"
:key="disInput.id">
<span v-if="tokenNum.length === index"
ref="spanText">{{content}}</span>
<input v-else
ref="virtualInput"
:maxlength="1"
v-model="disInput.value">
</li>
</ul>
其中 <span v-if="tokenNum.length === index" ref="spanText">{{content}}</span> //tokenNum是一个输入的数字字符串,tokenNum.length === index意思就是让你输入的下一个获取焦点
//JS：这个配合好
//设置span输入框中的内容为'|'
setLine () {
if (this.timer2) {
clearInterval(this.timer2);
}
this.content = '|';
this.timer1 = setInterval(() => {
this.setSpace();
}, SHOW);
},
//设置span输入框中的内容为空
setSpace () {
clearInterval(this.timer1);
this.content = '';
this.timer2 = setInterval(() => {
this.setLine();
}, HIDE);
}
},
beforeDestroy () {
clearInterval(this.timer1);
clearInterval(this.timer2);
this.timer1 = null;
this.timer2 = null;
}
//JS:这个也很优秀
// 给显示的input框添加值
getNum () {
for (let i = 0; i < this.tokenNum.length; i++) {
this.disInputs[i].value = this.tokenNum.charAt(i);//优秀
}
},
// 删除显示input框的值
delNum () {
let e = event || window.event;
if (e.keyCode === BACKSPACE) {
if (this.tokenNum.length < LENGTH) {//优秀this.tokenNum.length < LENGTH
this.disInputs[this.tokenNum.length].value = ' ';
}
}
},
（2）用户管理逻辑
各个弹框注意：第一：加载过程 第二：按钮防止二次提交
第一：加载动画： 表格加载 表单也要有加载动画
//规范：记得在每个组件 比如el-form 外面套一层容器
<div class="content" v-loading="loading">
<el-form ></el-form>
</div>
//加载:采用 元素上添加 v-loading="" ，data中定义布尔变量 ，两者结合 并在点击确定按钮是改变为true
第二：按钮防止二次提交
按钮上 :disabled="!formValid || loading"
finally(() => {
this.loading = false;
});
（3）租户列表中重要的等级 容错处理和旧租户特殊处理
tenant.hasOwnProperty('is_key_tenant') ? (+tenant.is_key_tenant).toString() : tenant.is_key_tenant = ''
(4) edr规则库特殊处理
// 优化一：两个if合并，减少代码冗余
let isFileExtentEdr = /^\.(zip|pkg|exe|cab)$/.test(fileExtent); //将IsfileExtentEdr改为isFileExtentEdr (规范)
// 文件选择错误提示
if ((this.type === 'vSEDR' && !isFileExtentEdr) || (this.type !== 'vSEDR' && fileExtent !== '.zip')) {
this.$error('EDR类型可以上传.zip, .exe, .pkg, .cab文件，其他类型只可上传.zip'); // 错误提示合并 （具体提示找交互再确认一下）
this.clearTnputFile(this.$el.querySelector('input[type="file"]'));
return false;
}
<!-- 优化二：借助accept属性 ，从而不需要手动判断文件类型。相应的就不需要文件选择错误提示，除非 手动去更改控制资源管理器预览的时候指定的文件类型 -->
<div class='wrapper'>
<!--input[type='file']的 accept属性 控制资源管理器预览的时候只能看见指定的文件类型-->
<input v-if='this.type===' vSEDR' type="file" accept=".zip, .exe, .pkg, .cab" />
<input v-else type="file" accept=".zip" />
</div>
6.简单效果
(1).动态口令复制到粘贴板.
方法：使用 document.execCommand('copy')。
具体：
copyToken (pwd) {
let input = document.getElementsByClassName('el-input__inner')[1];//获取input元素
input.value = pwd;
input.select(); // 选中input框中的value文本
document.execCommand('copy'); // 执行浏览器复制命令
input.value = '';//最后赋空 现实需要的道理
},
(2).input框添加焦点，input框添加焦点，他的value还是可以获取到的。这里联想到给input框加autofocus （一次性）和vue中自定义指令（一次性）
@click绑定在容器时，获取到input，保证人为点击始终获取input焦点
focus () {
this.$refs.input.focus();
},
（3）新增用户确定 密码长度变化 （真正理解v-model，理解为什么密码会变长）
this.form.password =Base64.encode(this.form.password);
改为如下
let params = {
user_desc: this.form.user_desc,
user_name: this.form.user_name,
password:this.editData ? delete this.form.password : Base64.encode(this.form.password),
component_limit: this.form.component_limit
}
(4).项目中使用$router $route的区别
1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象，里面可以获取name、path、query、params等
来源：https://blog.csdn.net/Xu_Meng_Ting/article/details/100876404