这篇文章是对于,在使用 element-ui 做项目时,所遇到的一些问题 :
- 使用 el-cascader 级联器时,出现下拉列表过长 :
使用目标: 引入 el-cascader 级联器,实现数据分级下拉显示。
出现问题:下拉列表太长,无法显示全局以及输入框的内容。
产生原因:可能是由于 Element-UI 版本问题。
解决方法:在全局样式表中插入的下面两种样式中的一种即可。
/*第一种*/ .el-scrollbar_wrap{ height: 200px; } /*第二种*/ .el-cascader-menu{ height: 200px; }
- 引入 Element-UI 的时间线 Timeline 和 Timeline-Item 时 :
使用目标:引入 Element-UI 的时间线 Timeline 和 Timeline-Item。
出现问题: Module not found: Error: Can’t resolve ‘…/timeline/src/item’ in 'D:\Study\Web\VUE\7.vue-shop\vue-shop\src\plugins\timeline-item’。
产生原因: 由于版本原因打算手动在 Element-UI 的按需导入文件 element.js 中添加时间线 Timeline 和 Timeline-Item,但是对应安装包已经存在,不同在另行插入。
解决方法:删除自己手动引入的代码块,直接在 element.js 按需导入Timeline 和 Timeline-Item 即可。
import {Timeline,Timeline-Item} from 'element-ui' Vue.use(Timelinte) Vue.use(Timelint-Item)
- 项目优化,定制首页内容 时出错 :
使用目标:项目优化时,定制首页内容,即在不同的打包环境下,按需渲染页面的标题 。我们可以通过插件的方式进行定制。在 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. <%:%> 同 <%=%>
- 外部 引入CDN资源 ,减小打包体积时,出现的问题 :
使用目标: 外部引入 CDN 资源,减小打包体积,从而提高速率。然后通过 node 创建 web 服务器,从而实现网址登陆。
步骤如下:
i. 创建 web 服务器;
ii. 托管静态资源,即 vue 打包生成的 dist 文件夹(webpack打包的出口文件);
iii.启动 web 服务器。
出现问题1:h.a is undefined;
产生原因:引入 CDN 资源的 js 文件自身是一定的顺序的。js 加载的时候也是按照顺序一个一个加载的,加载 element-ui 时需要用到 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 版本即可。
参考链接 : https://blog.csdn.net/qq_36151930/article/details/105678011