盘点用vue-cli、element-ui做项目过程中所遇到的坑

1.el-cascader级联器出现下拉列表过长

目的：引入el-cascader级联器，实现数据分级下拉显示。
出现的问题：下拉列表太长，无法显示全局以及输入框的内容，如下图1所示：
原因：可能是Element-UI版本问题。
解决办法：在全局样式表中插入的下面两种样式中的一种即可

/*第一种*/
.el-scrollbar__wrap{
    height: 200px ;
}
/*第二种*/
.el-cascader-menu {
    height: 200px;
}

2.Module not found: Error: Can’t resolve ‘XXX’ in ‘XXXX’

目的：引入Element-UI的时间线Timeline和Timeline-Item。由于版本原因打算手动在Element-UI的按需导入文件element.js中添加时间线Timeline和Timeline-Item,三个文件夹位置如下图2所示，插入代码为：

import Timeline from './timeline/index.js'
import TimelineItem from './timeline-item/index'

出现的问题：Module not found: Error: Can’t resolve ‘…/timeline/src/item’ in 'D:\Study\Web\VUE\7.vue-shop\vue-shop\src\plugins\timeline-item’
原因：仔细查看代码内容，发现node_modules包管理文件Elemnet-UI中包含时间线Timeline和Timeline-Item两个文件夹。于是在查找文件过程中，由于出现重名而导致错乱，找不到我们所引入的文件。
解决方法：删除自己手动引入的代码块，直接在element.js按需导入Timeline和Timeline-Item即可。

3. Error: Child compilation failed:Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): SyntaxError: Invalid or unexpected token

目的：项目优化时，定制首页内容，即在不同的打包环境下，按需渲染页面的标题 。我们可以通过插件的方式进行定制。在webpack的模板文件中index.html中配置如下的代码：

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>XXX</title> 
<!– 按需加载外部的 CDN 资源 --> 
<% if(htmlWebpackPlugin.options.isProd) { %> 
<!—通过 externals 加载的外部 CDN 资源--> 
········
<% } %> 

出现的问题：添加如下注释（包括’<%’）就出现了上述报错，Error: Child compilation failed:Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): SyntaxError: Invalid or unexpected token。大致意思是【错误：子编译失败：模块生成失败（来自./node_modules/html webpack plugin/lib/loader.js）：语法错误：无效或意外的标记】

'<%'表示输出的意思

原因： 注释并不是删除代码，也要注意对原有代码产生的影响。
解决方法：删除注释即可。
注： HTML代码中<%%>，<％=％>，<％：％>的各自含义：i. <%%>之间可以写服务器端代码；ii. <％=％>获取后台的变量值，比如后台一个会话[“ab”] =“ab”;前台<％= session [“ ab“]％>就能取到值; iii. <％：％>同<％=％>。

4.一波三折的ending

目的：外部引入CDN资源，减小打包体积，从而提高速率。然后通过 node 创建 web 服务器，从而实现网址登陆。步骤如下：i. 创建web服务器； ii. 托管静态资源，即vue打包生成的dist文件夹（webpack打包的出口文件)；iii.启动web服务器。
问题及其原因、解决办法： 这次出现的问题是一系列的，我逐个描述。
问题1： h.a is undefined 如下图所示。后来得知，引入CDN资源的js文件自身是一定的顺序的。js加载的时候也是按照顺序一个一个加载的,加载element-ui时需要用到vue，所以ele一定要排在vue后面。找到原因之后，调整顺序得以解决。
之后，又出现问题2： Error: if there’s nested data, rowKey is required.，如下图所示。大致意思就是“如果有嵌套的数据，需要在el-table标签中新增row-key字段”。即element-ui 2.7.0中增加了对树形结构的支持，使用树结构时，数据里面需要有id，属性row-key是必填的。。，知道是element-ui版本问题之后，可以修改直接引入CDN资源的element-ui版本即可。
附：注意引入CDN的文件的拼写问题，或者说，编写代码时，都要注意下。别问我怎么知道，说多都是泪。最后，希望大家得偿所愿，自我成就。