基于element-ui二次开发笔记

1、拉取到element-ui含example的源码后，
本地 yarn install
如有sass报错，再 npm i node-sass -s，使用yarn命令也可以
然后启动服务，yarn run dev
访问http://localhost:8085/ 即可实现调试。

2、运行测试版本
本地运行 yarn run test
报错
TypeError in plugin “gulp-autoprefixer”
Messae: Cannot read property ‘prefix_exceptions’ of undefined

可以看到报错内容，一开始我的精力一直在注意到alert.css，在项目里找确实没找到该文件，我想应该是sass安装失败了，没有将scss文件生成为css文件。
于是开始检查sass，网上搜到检查sass安装命令（坑）
node-sass -v
结果一直提示node-sass不是命令，无语，然后我就以为sass安装失败了，就不停地重新安装，卸载，循环****，后来发现应该使用命令 npx node-sass -v来查看版本，其实sass一直安装都是没问题的。

后续又找项目组同事求助，在同事的帮助下先使用run build一下，应该会产生css，这样就不会报这个错了，结果run build也报同样的错，崩溃
怀疑到sass版本过高的问题
于是，安装了4.0.0的sass版本，

• 此处又是一个坑，因为一直用yarn命令安装，导致每次package.json文件的sass对应版本号都会改成6.0.0，改用npm install，结果一样，最后在大佬的帮助下，使用了npm i进行安装，没有再将所有依赖安装成最新版本。完美

结论1：npm i 安装时不会将package.json的依赖改为最新版本。npm install 和yarn会升级到最新。

好了，这时候环境已经配好了，信心满满，一切完美
再次执行npm run test，
竟然还是报错跟图上的一样！
这次不好意思再麻烦大佬，自己摸索，各种搜索，没什么头绪，后来搜到一篇文章
https://blog.csdn.net/caimingxian401/article/details/95945750
感谢博主，虽然报错不一样，但是他给了我思路，也许是我的gulp-autoprefixer版本过高，因为我看了下配置中，很巧，gulp-autoprefixer也是6.0.0，刚才sass也是6.0.0，也许是一样的问题，抱着试试看的态度我把
package.json内的gulp-autoprefixer改为4.0.0版本。
删除node_modules重新执行。
npm i
npm run build:theme
npm run test
就ok了，如下。（注意，如果是第一次run test，需要build，否则可省略）

结论2：这次的失败主要问题其实是gulp-autoprefixer版本过高导致的bug，只要修正这个版本。
也许sass的版本并不用降低，不过我也没试，感兴趣的朋友自己可以试试看

此时访问 http://localhost:9876/# 来查看测试情况，或者在test => unit => coverage => icov-report =>index.html查看覆盖率报告

3、新增组件步骤：
新增一个组件dragSort步骤，
3.1 需要在package下新增对应文件源码
3.2 需要在src\index.js增加组件注册申明，如果是注册方法调用的组件，一定要在build/bin/build-entry.js进行添加,如果是vue组件在/components.json内添加，否则每次npm run dev时，src\index.js中的命令行会被重写。

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$dragsort = Dragsort;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

3.3 需要在test\unit\specs\下增加对应的.spec.js文件，单元测试脚本（如不需要可不写）
3.4 需要在examples\docs\zh-CN下新增对应的md文件，即api文档说明
3.5 需要在examples\nav.config.json文件中添加新增组件的路由地址
3.6 要在types下增加对应组件的参数定义（可不写，目前不知道这个是干啥用的）
3.7 样式文件：
demo样式路径：examples\demo-styles\
引入位置：examples\demo-styles\index.scss
源文件样式路径：packages\theme-chalk\src
引入位置：packages\theme-chalk\src\index.scss
注：新增一个组件需要重新run一下环境才会生效。

4、字体包导入
参考地址https://www.jianshu.com/p/e381607febae
4.1 阿里小图标官网

https://www.iconfont.cn/home/index

4.2 添加到购物车并添加至项目
4.3 更多操作编辑
4.4 下载
4.5 将tff和woff格式引入后，生成@font-face
图标对应引入即可，注意，下载的包里有个index.html文件，可参考里面的范例，可以发现content字段的值。

tips1：后续开发中发现拓展字体组件有问题，会涉及到命名问题，于是使用fontcreator.exe文件进行字体ttf包合并。注意修改图标的属性，其中的key值不能重复即可。
tips2：example中展示所有的icon时，使用了循环遍历$icon这个值，
注意，该值的注册位置：examples\entry.js；相关配置文件位置：examples\icon.json，添加后即可获得对应新增的图标，
针对tips2，今天又踩坑，添加了一个字体图标后，替换了字体文件，但是字体样式名也改了，从‘el-icon’改为‘s-icon’,一直没啥毛病，今天突然example里的icon文件中的全量icon不能正常显示了，发现是每次打包都会把文件examples\icon.json的内容写空。很奇怪，多次检查，重启安装，直到后来发现了entry流程中可能用到的‘iconlint.js’文件，其中

'use strict';

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
var nodes = postcss.parse(fontFile).nodes;
var classList = [];

nodes.forEach((node) => {
  var selector = node.selector || '';
  var reg = new RegExp(/\.el-icon-([^:]+):before/);
  var arr = selector.match(reg);

  if (arr && arr[1]) {
    classList.push(arr[1]);
  }
});

classList.reverse(); // 希望按 css 文件顺序倒序排列

fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => { });

查看上述文件，可以发现该文件是指定了我们读取某个文件，然后写入，写入的正是我这次频频被改为空值的json文件。反复检查，发现一个正则表达式，恍然大悟，愉快的将new RegExp(/\.el-icon-([^:]+):before/);改为new RegExp(/\.s-icon-([^:]+):before/);
重新run dev，果然解决了该问题。
其实一开始遇到这个问题的时候我反复尝试描述问题去百度，没有自己尝试解决，总想吃现成的。
每个项目在操作过程中都会遇到很多奇奇怪怪的问题，网上不一定能找到答案，有时候往往自己沉下心思去阅读代码，认真看懂并理解里面的逻辑，就会发现解决起来，如此简单。
之前换了这个名字一直没问题，是因为我的node_modules没有被安装入新的文件或者改写，系统自动跑起来的时候，就跳过了这个流程。前几天我因为跑测试用例，重新安装了karma，导致run dev时，重跑了整个流程，这时候配置参数有误，就会立刻体现在自动生成的文件中了。

5、v-model的本质
今日开发遇到一个问题，设计一个mac地址输入框
输入数据数组形式传出，研究发现我一直给v-model的绑定数据只有单个输入框的值，并非数组，翻阅资料发现，这是一个基础知识。
v-model的本质
从最初学习Vue就知道v-model可以实现双数据绑定，根据官方文档介绍，v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input事件监听。

所以父组件使用v-model可以监听到子组件$emit(‘input’ , value)事件，因此我们可以很明显的意识到，组件使用v-model本质上还是一个子父组件通信的语法糖。

6、子组件传递给父组件的function参数问题
子组件传递给父组件的function，
如
handleKeyup(event) {
this.$emit(‘keyup’, event);
},

父组件调用时，除了event，还需要获得当前vue中的其他值，例如

<el-input
ref=“input”
:value=“displayValue(index)”
:disabled=“inputMacDisabled”
:size=“inputMacSize”
:name=“name”
:label=“label”
@blur=“handleBlur”
@focus=“handleFocus”
@input=“handleInput”
@change=“handleInputChange”
@keyup=“handleKeyup($event, index)”
@keydown=“handleKeydown”
>
{{ spacer == ‘colon’ ? ‘:’ : ‘-’ }}

其中，index值传过来的同时，需要保留父组件的event参数，可以使用如上写法。

7、组件的name很重要
踩坑，新增组件时，组件名称一定要注意。
我现在新增一个组件名叫’ElAddEntry’,结果调用的时候，我使用的是<el-addentry>,执行后页面一直报错该组件没有注册，根据笔记的第三条反复检查，无果，后续进行参考element 的面包屑源码，才发现了问题。
如果组件名是‘ElAddEntry’，那么调用时应使用

<el-add-entry></el-add-entry>

8、测试脚本踩坑
今天测试脚本一直跑不通，报错

Disconnected, because no message in 30000 ms.

估计是时间太短了，百度了下设置内容，解决方法如下：
找到karma.conf.js配置文件，添加如下设置

    browserNoActivityTimeout: 600000

解决问题
测试结果如下：

HeadlessChrome 86.0.4240 (Windows 10.0.0): Executed 848 of 853 (30 FAILED) (1 min 20.339 secs / NaN secs)
Chrome 86.0.4240 (Windows 10.0.0): Executed 356 of 853 (17 FAILED) (45.228 secs / NaN secs)
TOTAL: 47 FAILED, 1157 SUCCESS

其中Headless Chrome说明参考如下地址：
https://www.jianshu.com/p/aec4b1216011

9、vue语法踩坑
改造element table组件，其中涉及到活表头
目前element的组件不支持数组形式data传入来设置表头，支持html中调用<el-table-column 元素来插入表头数据，经过我的思考，感觉活表头需要支持数组，否则功能无法实现。

将以下代码修改

右侧为修改后的组件，其中columnsData就是列数据，
返回列渲染产生了比较纠结的问题，后续终于成功，这里要强调一下，this.$createElement方法的用法，参考网址如下：
添加链接描述

10、scroll限制最大高度
需要做树选择器，下拉弹窗可能折叠也可能展开，具体高度希望能给个最大高度，剩余根据内容弹性高度，一开始设置了滚动条的style，并不生效，后续研究发现，max-height加载到最外层div是无效的，使用wrapStyle即可加载到内部wrap节点上，max-height即可生效。

11、分页器
分页器layout参数

---

layout 组件布局，子组件名用逗号分隔 String sizes, prev, pager, next, jumper, ->, total, slot ‘prev, pager, next, jumper, ->, total’

---

看说明没看懂，源码里也没找到箭头代表什么意思，后来在一个网站上看到，箭头意思是右边的东西会靠右，放在最右边不生效

12、表格横向滚动时，头部卡顿不流畅bug修复
由于使用的是老版本，表格头部在拖动横向滚动条时会出现卡顿抖动的感觉，不流畅，跟不上表体的速度
检查源代码，并没发现主要原因，后续定位发现是这一步的问题，对比最新element代码，发现不卡顿，检查后发现抖动的原因是使用了throttle节流函数，导致每20毫秒执行一次，所以才出现了页面滚动时表头表体不同步的情况，删除节流即可修复该问题。

13、css类名命名规则
elementui中类名命名规则很特别，学习了一下，CSS命名规范——BEM思想（非常赞的规范）
人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思？它们的出现是源于BEM和Nicolas Gallagher…

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。
.block{}
.block__element{}
.block–modifier{}

.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block–modifier代表.block的不同状态或不同版本。
之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如：

.site-search{} /* 块 /
.site-search__field{} / 元素 /
.site-search–full{} / 修饰符 */