Dream

vite.config.ts种build下必须配置minify（压缩方式）。压缩方式对比率查看以及build:{ minify: "terser", terserOptions: { compress: { drop_console: true, drop_debugger: true } }}

ant-design-vue customRequest。

vite3中 关于path无法使用的问题

对element ui中的 el-autocomplete中的上下键进行扩展，可上下键闭环滚动功能选择关键对el-autocomplete进行监听上下键并处理<template> <div class="content"> <el-autocomplete v-model="value" ref="selectRemote" placeholder="请输入关键词" @select="handleSelect".

vue中多数情况下使用template封装组件逻辑清晰结构简单。但是在某些情况下，比如非常简单的组件 vue render简单解析或者template无法解决某些场景下，。使用完全javascirpt能力就显得尤为重要。文章目录使用render场景render简单了解createElement 了解模板中 attribute 对应的数据对象render中操作`$attrs`和`$listener`render 中 `$slots、$scopedSlots、scopedSlots`$slots$sco.

平时用render 非常少。当然vue3 对template 模式优化，其速度和render几乎无异。但是对简单的组件其实用render模式则更加优雅。创建一个全屏小组件template<template> <i class="el-icon-full-screen" @click="toggleScreen"></i></template><script>const screenfull = require("screenfu.

由于CKEditor5 对IE 11不支持。那么这里对CKEditor4 进行重新封装文章安装引入ckeditor4新建CKEditor4组件使用效果安装npm install ckeditor4-vue引入ckeditor4import CKEditor from "ckeditor4-vue";新建CKEditor4组件<template> <div> <ckeditor :editor="editor" :valu.

市面上众多富文本编辑器quill、wangEditor、Tinymce、ckEditor等等，这里感觉ckEditor最为丝滑~。文章安装安装vue组件相关以及富文本类型其他富文本类型新建CkEditor5组件使用安装安装vue组件相关以及富文本类型npm install --save @ckeditor/ckeditor5-vue2 npm install --save @ckeditor/ckeditor5-build-classic其他富文本类型类型预览npm install .

vue3.x 已经出来一段时间了。而ElementUI 也是以TypeScript和Composition API进行了重构重开了一个ElementPlus。（谁说Element 没人维护的~~~）目录安装或升级vue/cli创建todo-app加入Element-Plus新建页面新建vuex安装或升级vue/cli直接在原有的基础上进行升级 npm i -g @vue/cli或者npm install -g @vue/cli@next创建todo-app1.创建appvue create.

Vue 之ElementUI换肤的解决方案，网络上有很多，这里就不去一一赘述。这里直接用ElementUI给的解决方案使用下载样式，简单粗暴。然后全局替换下载的ElementUI样式中的color和background-color值然后直接将替换好的样式直接link到head上ElementUI 动态换肤：theme-chalk-preview注意的问题：有的时候我们会对ElementUI样式进行重写。那么这个时候如果没有自定义class去包裹ElementUI的class去写的话，就会造成，直.

有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条，直接加title.,体验不太好，想增加一个手动拖动拉伸收收缩的功能目录slidebar增加拖拽点增加动态style增加计算属性barWidth监听拖拽点slidebar增加拖拽点增加id 为split-panel的布局。且设置isCollapse为true的时候，即只有打开的时候才可以进行拖拽split-panel样式：#split-panel { cursor: col-resize; height: 100%; width.

Element-UI中el-image中的预览功能没有单独提供api。又想使用功能。方法一：此方法就是直接导入。node_modules中的element-ui中的image-viewer import ElImageViewer from 'element-ui/packages/image/src/image-viewer'因为包含es6 语法，所以ie部分可能无法兼容。方法二 直接把image-viewer源码等相关文件copy出来此法过于繁琐，因为牵涉到的方法还蛮多方法三： .

平时对象的值变化监听，在watch上即可监听，但是表达式只接受简单的键路径。'obj’或者‘obj.xx’，而对于更复杂的就需要用到函数示例：现在父组件传递给子组件conf对象，现在想动态的监听conf.formModel[conf.item.prop]，也就是formModel中a属性的变化conf:{ formModel:{ a:‘1123’ }, item:{ prop:'a' }}键路径方式会报错：watch: { 'conf.formModel[con.

element 表格需要单元格不换行显示方法一：增加样式 .el-table .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}方法二：增加show-overflow-tooltip属性el-table 默认会换行显示，加了show-overflow-tooltip属性，会单行显示，且超出会以popover去显示...

以前利用exceljs 做过 导出自定义样式的Excel文件，然而现在有需要表格的表头是多级的。这样会非常麻烦。要把没级表头重新拆开以最小表头为层级的数，还要去处理行与列的情况。这样工作量忒大了，直接裂开。所以这里直接用了xlsx 中的导table为excel的方式目录xlsx地址依赖安装引入`xlsx`和`file-saver`使用xlsx地址xlsx地址依赖安装1、安装xlsx依赖npm install xlsx -S2、安装file-saver下载excelnpm install.

有些时候element-ui提供的loading，某些人觉得不好看。那么这个时候就要自定义一些loading。这里给几个推荐文章目录开源spinnerepic-spinners地址效果vue-spinner地址效果根据上述进行封装开源spinnerepic-spinners地址效果vue-spinner地址效果根据上述进行封装...

最近项目在 打包时出现错误：issue传送门造成这个的原因是因为：导入导出模块使用的规范不同，commjs和ES6的导出导入冲突解决方案在babel.config.js中增加sourceType选项module.exports = { presets: [ '@vue/app' ], sourceType: 'unambiguous'}千里之行始于足下...

因为vue一般情况是数据单向流向，父到值，而这里 错误就是数据流向的问题。可以参考sync用法简易封装核心：//省略<el-pagination :current-page.sync="page" :page-size.sync="rows" layout="total,sizes,prev, pager, next, jumper" :total="total" :page-sizes="[10, 15, 30.

货币金额计算等。因为IEEE754 数值的浮点计算，js没有处理浮点计算精度误差问题,其他语言入java，c内部处理了。currency.js传送门只有1kb的超级轻量级的处理货币金额的js库安装currency.jsnpm install --save currency.js使用currencynode_modules中已安装名为currency.js打开currency.js 使用module.exports导出模块那么使用require(‘模块名’)引入。我们都知道对于nod.

vue双向绑定，但是在父子组件之间遵循单向原则，即子组件不要去改变父组件传递过来的值示例：子组件 child-dialog<template> <div v-show=“show”> 子弹窗组件 <button @click="close">关闭</button> </div></template> <script> export default { name: 'dialog',.

在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。slot 和 slot-scope 这两个目前已被废弃，仍可使用，据说3.0后要没了旧slot用法子组件：<div> <slot name=“test”></slot></div>父组件中使用：<div> <template slot="test"> </template></div>旧的s.

vue 中v-html将原始html渲染为带样式的文本最近在使用v-html去渲染富文本的时候发现，怎么都渲染不出。后发现后端为了安全性考虑，将<"、">"、"&"全部进行了转义这个时候要使用innerText 去渲染出原始htmlVue.prototype.$HtmlUtils = { /** * @param {Object} text 转码为html */ htmlDecode: function(text) { var temp .

Dcloud 的产品早在mui,h5+的时候就在使用，当时的Dcloud ，文档混乱，示例混乱，社区混乱，导致出现很多问题。都找不到人解决。不过现在的Dcloud中uni-app横空出世，初步使用，虽然里面还是有不少问题，但是Dcloud的产品越来越向好的方向发展，社区也越来越壮大，这里也衷心希望Dcloud越来越好uView：uView的目标是成为uni-app生态最优秀的UI框架。组件：工具：模板:千里之行始于足下...

echart 使用过程中经常遇到x轴标题过长而导致有些标题不显示的问题这里我采用直接使用旋转坐标轴标题配置xAxis：xAxis:[ axisLabel:{ interval:0,//标识间隔多少个标题显示，这里标题过长会重叠遮挡，这里0设置强制显示 rotate:60//旋转60度 }]以上方法是可以是可以，但是有时候转了轴之后还是会遮挡,这个时候设置padding，height，lineHeight，都是没用滴。设置gird中的属性即可比如：原因是grid的bott.

vue 打包之后项目需要部署到tomcat（github pages）静态。如果采用vue-cli3 自己脚手架生成的默认配置，那么只能配置到tomcat的根目录上（Root内）而想部署非根目录（自己的项目）在 vue.config.js 中设置正确的 publicPath：例如：你想设置https://域名/自定义名/这种格式，那么只需要设置module.exports = { pu...

1、Query String Parameters发起get请求参数显示与url上，其参数跟在？后面且以&分割不同的参数例子（后端springboot restful风格）前端：http://xxx/getTest?name=测试&password=测试2后端：（参数可以使用类接收） @GetMapping("/getTest") public String ...

这里以Element UI为例方法一：在需要的 el 组件上增加自己的class比如，需要设置el-dialog的body背景色和高度.seller { .el-dialog__body{ background-color: #f5f5f5; height: 100%; }}又比如，这个seller下有两个dialog，一个全屏希望高度和背景色自定义...

以前用element分页的时候，有个sync一直没去想为啥要用这个<el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNumber" :page-size="pageSize" layout="prev, pa...

参考对于VueCli3配置不同环境变量，请参考: vue-cli3创建项目而对于Vuecli3以下的则要注意使用cross-env去设置变量！以开发环境说明运行脚本"scripts": { "dev": "cross-env node build/dev-server.js" }config中的dev.env.jsmodule.exports = { NODE_E...

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。重新安装最新版...

最近遇到这么个场景的问题，一个页面中数量不定的报表，而每个报表不同点只是字段不同以及生产报表的地址不同而已，这个时候可以使用v-for去动态生成组件。字段也是动态生成，这时候就遇到了问题—>...

使用axios下载流验证码的图片，并显示。其中使用responseType为blob，具体参考我的博文：下载文件，跨域获取Response Headers中响应头，以及IE无法下载文件只不过这里是使用saveAs进行下载文件，而这里就需要去获取URL然后显示所以改造（其中fetch是axios的封装）Vue.prototype.$downloadFileAxios = functio...

最近遇到一个在跨域的情况下无法下载excel文件的问题（我的项目通过Iframe集成到他人系统上）核心代码下载文件通过boldimport { saveAs} from 'file-saver';axios({ method:'get', url:'下载文件地址', responseType:'blob'}) .then(function(response) ...

现有一个系统A通过Iframe集成到t其他系统B中。而A系统使用了keep-alive。如果A系统单独运行是有小标签的，关闭小标签，就不缓存关闭的组件，而现在集成到B系统中，那么我打开一个页面就等于缓存一个页面，而又无标签关闭，导致在IE浏览器中卡死，现在就解决这个。方案一 ：B系统关闭标签通过postMessage 信息传递到A系统，让A系统自己调用关闭标签栏的动作，其实就是配合exclu...

最近有个后端同事在写更新进度条遇到了一个问题，进度条马不停蹄，直奔100%！！！！，这让我来了兴趣！他的代码大致如下：var todo=0;var progressNumber=0;//进度条do{ ajax(){//ajax已经设置为同步 更新progressNumber }}while(progressNumber<100)初看是没得问题。但是效果就是直接奔...

Vue-CLI3引入boostrap以及jquery等第三方css以js等安装 bootsrapnpm install bootstrapmain.js全局引入 bootsrapimport 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css';启动运行，报错因为bootstrap会依赖jquery以及Popper...

最近使用了读取本地Excel，blob数据时，使用了FileReader中readAsBinaryString方法，然后报错查了资料才知道，这个方法17年就已废除，而且建议不要再生产环境使用（然而我还是大胆的使用了他，就这么刺激，哈哈~）而不能使用，自然也是给了可替代的方法==>传送门咻咻~...

配合Element中的el-upload组件进行提取Excel中的数据XLSX使用：1.npm install xlsx2.import XLSX from "xlsx"核心代码 /** * @description: 导入excel并进行数据提取 * @return: */ Vue.prototype.$importExcel = funct...

近来遇到一个奇葩问题，在Chrome浏览器下，接口请求数据（get），后端Debug模式可以响应，而IE下一点反应都没有，一脸懵逼~~~~后查证得知IE下，get请求，若请求接口一致的情况下，它会直接从缓存里取所以解决办法有以下方式1、直接在url后面拼接时间戳例: http://xxxx?time_stamp=" + new Date().getTime()2、增加请求头 If-M...