特比鸣谢以下博主的优秀文章
指路官网：Avue
指路文档：CRUD 组件 - 文档 - 《Avue 2.x 开发指南》 - 书栈网 · BookStack
指路优秀博主清晰的总结：Avue前端控件大全和表格属性 - pxuan - 博客园
优秀博主路由传参问题详解 指路vue-router query和params传参(接收参数)，$router、$route的区别 - 考拉很OK - 博客园
指路博主做出当前时间本周一JS根据日期获取这周的周一 - laugher_ccc - 博客园
回到顶部方法参考：https://www.csdn.net/tags/MtTaQgzsOTQ2MTMtYmxvZwO0O0OO0O0O.html
vue3.0 `slot` attributes are deprecated.`slot`属性已弃用
vue3的slot插槽用法，`slot-scope` are deprecated_浩星的博客-CSDN博客_`slot-scope` are deprecated.
封装防抖方法
vue 实现input输入框函数防抖debounce_input框输入防抖_My&Liu的博客-CSDN博客
f12无法看到接口：https://www.csdn.net/tags/NtzaggysMjE5MjAtYmxvZwO0O0OO0O0O.html
el-autocomplete清空之后联想的值无法出现：解决el-autocomplete通过clearable清空内容后 重新输入提示未显示问题_秃头不头秃.的博客-CSDN博客
video动态更改视频没有播放问题
iconfont 多色图标引用并改颜色
iconfont 多色图标使用介绍 - 灰信网（软件开发博客聚合）
视频频谱问题
js获取音频条 频谱的动画数据 每秒频谱数值 - it610.com
echart legend 对齐问题echarts饼状图legend 图例对齐_码龄1年零5个月的博客-CSDN博客_echarts legend 右对齐
video动态更改视频没有播放问题
protobuf3使用问题
Protobuf3详细介绍_xupeng1644的博客-CSDN博客_protobuf3
自定义树形——el-tree
vue项目 el-tree的界面自定义 实现增删改查操作 - Angel-01 - 博客园
项目中tinymce
引入：Vue3使用tinymce富文本编辑器_szx的开发笔记的博客-CSDN博客_vue3 富文本
图片上传（FormData版）：tinymce富文本编辑器实现本地图片上传_Li_na_na01的博客-CSDN博客_tinymce上传本地图片
本地视频上传（FormData版）
tinymce 上传本地视频_小星落的博客-CSDN博客_tinymce上传视频
上传后展示问题
tinymce编辑器上传本地视频 - 百度文库
vue+element制作安卓页面，点击后有蓝色背景如何解决
移动端网页点击链接出现蓝色背景如何解决_心若向阳无谓悲伤的博客-CSDN博客_移动端点击蓝色背景
vue3语法糖 父子组件传值问题
Vue3父组件访问子组件数据 defineExpose用法_bug快死去的博客-CSDN博客
vue3-setup语法糖 - 父子组件之间的传值_SwaryLA的博客-CSDN博客_vue3语法糖父子传参
数组对象深拷贝
JS学习笔记（九）深拷贝&浅拷贝【Array、Object为例】_js深拷贝array_想要大口炫榴莲的博客-CSDN博客
Vuepress运行报错
vue.js - 一次vue-cli4大项目升级到vite的经历 - 个人文章 - SegmentFault 思否
npm run serve 直接报错
动态require图片
vue中require引入路径存在变量_vue require 变量_是拾玖不是十九的博客-CSDN博客
iconfont
echart地图
vue echarts绘制省份地图并添加自定义标注_echarts地图标注_微笑的鱼_的博客-CSDN博客
echarts 地图 api.coord is not a function
Vue中使用Echarts中的地图组件报错：TypeError: api.coord is not a function_彭珂个人网的博客-CSDN博客
vuex刷新页面 数据清空问题
vue3对象赋值问题
Vue2和Vue3的响应式原理及区别_vue2和vue3响应式的区别_初级的CV工程师的博客-CSDN博客
vue3+ts props
vue3+ts深入组件（一）Props_vue3 ts props_Asen-coder的博客-CSDN博客
element-plus 日历 每周第一天从周一开始
Element plus设置日历每周第一天从周一开始_element plus 日历引入后还是周日开头_菜鸟茜的博客-CSDN博客
Vue3 title更换 <title><%= htmlWebpackPlugin.options.title %></title>
vue-cli3的title标签中出现的htmlWebpackPlugin.options.title值进行修改_高先生的猫的博客-CSDN博客
img图片地址不变，网站缓存，无法更新渲染
echarts轴刻度线-axisTick
https://www.cnblogs.com/goloving/p/9110951.html
vue-charts 示例
Vue-ECharts + Vue 3 - StackBlitz
html2canvas 报错
html2canvas使用中报 Error: Element is not attached to a Document_html2canvas error-CSDN博客
::v-deep .xx改为:deep(.xx)
字体渐变
CSS 实现文字渐变色_css文字渐变色_想上天的玖姑娘的博客-CSDN博客
树形icon更改为自定义
自定义《element-UI》el-tree 的样式 、亲测管用_el-tree样式-CSDN博客
滚动优化
https://download.csdn.net/blog/column/9692014/119636300
vue3动态生成元素数组
js 去重使用reduce
JS 中 reduce()方法及使用详解_js reduce-CSDN博客
后端返回base64编码，前端改为文件导出
关于后端返回的base64编码，前端实现excel表格导出_base64转excel-CSDN博客
import { saveAs } from "file-saver"无法用在工具类
vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本_npm install file-saver-CSDN博客
Vue3跳转带参问题，Vue3已经没有params，解决方法
vue3 rouer params传参的问题_vue3 route.params-CSDN博客
echart堆叠柱状图-总和
echarts 堆叠柱状图 顶部添加合计_堆积柱状图如何显示总和-CSDN博客
目录
4. Invalid VNode type: undefined (undefined)
10. 安装依赖 Visual Studio C++ core features 报错
11. vue3中this.$set不能使用，换成Reflect.set
5.display:grid grid-template-row无效
7. vue+element制作安卓页面，点击后有蓝色背景如何解决
9. vant 轮播图，指定宽度，指示器无法准确定位到最后一个item
20. ElementPlus table自带filters筛选-动态更改选中内容
-
开发过程中&工具使用
1. 在开发移动端尺寸时
如果你做的终端尺寸是1280，但是实际开发是其中一个页面，
页面尺寸为1080
f12需要开发工具需要调整为1280，而不是1080
2. protojs 生成报错路径分析
可能是protobufjs版本太高，可调整至protobufjs@7.2.3
-
Js中难点
1. img地址不变，图片不刷新渲染
在图片地址不变的情况，图片无法更新渲染
在地址后面加上随机数
2. true、false 为字符串，改为boolean
3. reduce去重、求和
请参考上方大佬文章
-
Vue中难点
1.router跳转
到那个页面的时候首先要注意 接受为$route并不是$router
 | 传参可以用params搭配router.js 加载路由连接后面/:id? this.$router.params 使用this.$router.resolve 获取时：this.$route.query |
2. vue更改页面title
document.title="xx"3. 添加和取消监听时间在vue中失效
×错误代码
document.addEventListener('click',(e)=>{
this.handleCancel(e)
})
document.removeEventListener('click',(e)=>{
this.handleCancel(e)
})√正确代码
document.addEventListener('click',this.handleCancel)
document.removeEventListener('click',this.handleCancel)4. Invalid VNode type: undefined (undefined)
调用组件时选择先import，再use
5. 上传图片得问题
在change方法中，
可以用
this.imageUrl = URL.createObjectURL(file.raw);//制作出静态路径在之后上传之后用file.raw+new FormData()+append()上传
6. 安装时遇到提示权限问题
解决：
项目文件夹-属性-只读-取消勾选-确定
7. vue子路由无效空白问题
这个时候无法访问
原因父项中没有组件，所以需要在父中加一个控组件
const emptyLayout = { render: e => e("router-view") };
8. 打包图片资源报错
Syntax Error: Error: '"E:\xx\xxx\node_modules\gifsicle\vendor\gifsicle.exe"'
处理方法：
npm uninstall image-webpack-loader
cnpm install image-webpack-loader
9. vue3语法糖，父子组件
请参考上方链接
我主要的问题是子组件没有defineExpose操作
10. 安装依赖 Visual Studio C++ core features 报错
尝试过npm --g --production windows-build-tools 报错，也试着安装过VS
最后使用了cnpm install 解决了
11. vue3中this.$set不能使用，换成Reflect.set
12. 使用vue项目制作的网站，嵌入客户端，打开调试
control+f12
13. Vue3 子组件里面插槽传递数据，父组件控制展示
// 子组件
<child>
<slot name="footer" :val="item" />
</child>
// 父组件
<parent>
<template v-slot:footer="props">
{{ props }}
</template>
</parent>14. 跳转到外部路由
window.open(
router.resolve({ path: `/detail/${item.ID}` }).href,
"_blank"
);15. Vue3更换title
本项目中，有地方可以设置网站title（接口），但本地需要有一个默认title
<title><%= htmlWebpackPlugin.options.title %></title>
// vue.config.js
chainWebpack: config => {
config.plugin("html").tap((args) => {
args[0].title = "智慧教学空间";
return args
})
},16. 跨域代理问题
devServer: {
open: true,
host: "localhost",
port: 80,
https: false,
proxy: {
// 跨域地址为——192.168.1.3:80/api/a.jsp
"/api": {
target: "http://192.168.1.3:80",
changeOrign: true,
https: false
}
}
}
axios 冲突，经常碰到如果是跨域的话可能是外网的接口，和本地已经封装的axios就不相同，所以如果出现了冲突，就需要重新create一个axios实例。
配置及完成后，axios请求接口时，应直接使用api，不需要加接口地址192...xxx
axios.post(`/api/a.jsp`, data, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
}).then((res) => {
console.log('这是结果吗', res);
return res;
})17. Vue3动态生成元素数组
<div :ref="getRefList" v-for="item in list" :key="item.ID" class="item" />const reflist= ref<any>([]);
const getRefList = (el: any) => {
reflist.value.push(el);
};18.videojs 判断字幕更改
// 控制条
controlBar:{
{ name: "captionsButton" }
}
// 监听
player?.on("texttrackchange",function(event){
console.log("判断字幕中", player.textTracks())
})19. vue.config.js使用动态变量
// vue.config.js中
const name=require("./config/name.ts")
// name.ts
exports.name="123"20. videojs 配置中文
import video_zhCN from "video.js/dist/lang/zh-CN.json";videojs.addLanguage("zh-CN", video_zhCN);
videoplayer=videojs(
videoref,
{
...
}
)21. v-chart 点击图例事件
正确的监听绑定为
rankEchartRef.value.chart.on("legendselectchanged", handleLegendSelect);
-
样式修改
1. Avue-crub单元格高度更改
这是新遇到的只是Avue-crub，这是后台经过代码生成得到的vue文件，就在觉得很方便很好用的时候，突然需要改一个单元格高度，想了很久，找了很久的属性，能力浅薄，没找到
最后使用了样式修改
<style lang="scss" scope>
.el-table tr td .cell{
// background: green;
height: 35px;
}
.el-table--small td, .el-table--small th{
padding:0px;
}
</style>
2. Element-ui选项卡组件更改样式
.el-tabs__item{}3. flex换行
flex-wrap:wrap4. css变淡灰
.dd {
filter: opacity(0.5) grayscale(1);
}5.display:grid grid-template-row无效
grid-template-rows:这个属性用百分比就好了
6. iconfont 渐变色
import * as echarts from "echarts";//正确i {
font-size: 52px;
background: -webkit-radial-gradient(#caff55 20%, #45cd00 60%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}7. vue+element制作安卓页面，点击后有蓝色背景如何解决
如上图，在f12选择移动设备的情况下，对此进行点击，背景有蓝色底色，如何解决参考上方链接，可加入样式
-webkit-tap-highlight-color: rgba(0,0,0,0);
8. iconfont多色图标
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconClass"></use>
</svg>
// iconClass="#icon-edit"9. el-tree 样式修改
// el-tree
.navTree {
padding-top: 10px;
background: transparent;
&::before {
content: "";
position: absolute;
top: 0;
margin-top: 30px;
left: 0;
border-left: 2px dashed #cccccc;
width: 10px;
height: calc(100% - 30px - 10px);
margin-left: calc(10px + 10px);
z-index: 99;
}
::v-deep .el-tree-node {
position: relative;
}
// ::v-deep .el-tree-node::before {
// content: "";
// position: absolute;
// top: 0;
// margin-top: 30px;
// left: 0;
// border-left: 2px dashed #cccccc;
// width: 10px;
// height: calc(100% - 30px - 10px + 20px);
// margin-left: calc(10px + 10px);
// z-index: 99;
// }
::v-deep .el-tree-node:last-child::before {
margin-top: 10px !important;
}
::v-deep .el-tree-node.is-expanded > .el-tree-node__children {
position: relative;
}
::v-deep .el-tree-node.is-expanded > .el-tree-node__children::before {
content: "";
width: 15px;
height: calc(100% - 40px - 10px);
margin-top: 40px;
margin-left: calc(8px + 5px + 10px);
position: absolute;
border-right: 2px dashed #cccccc;
background: white;
// z-index: 999999;
z-index: 999;
}
::v-deep .el-tree-node__expand-icon {
margin: 3px 0 3px 10px;
z-index: 999;
width: 10px;
height: 10px;
background: white;
}
::v-deep .el-tree-node__content {
position: relative;
background: transparent;
margin-top: 10px;
}
::v-deep .el-tree-node__content::before {
content: "";
position: absolute;
top: 0;
margin-top: 14px;
left: 0;
border-top: 2px dashed #cccccc;
margin-left: calc(15px + 10px);
width: calc(100% - 15px - 10px);
height: calc(100% - 20px);
// z-index: 999;
z-index: 998;
}
::v-deep .is-current {
color: #409eff !important;
}
::v-deep .el-tree-node__expand-icon.is-leaf {
width: 5px;
height: 5px;
}
.custom-tree-node {
width: 100%;
background: white;
z-index: 9999;
}
}10. 字体渐变
.text{
background-image:linear-gradient(180deg,orange,pink);
color:transparent;
-webkit-background-clip:text;
}11. 字体描边
div {
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}-
框架使用
1. Avue-curb列表搜索功能
在column相应的字段中加上search:true
搜索的表单label长度为column相应字段的searchLabelWidth:150
搜索文本框的长度为column相应字段中的searchSpan
option的searchMenuSpan像是调节搜索按钮容器的长度
2. element时间格式
其次传参若是网址
传参若不是网址
{
name:'aa',//src/router/view/index里的那一条配置name:'aa'
params:condition//condition是对象
]3. 树形点击取消问题
 | 点击收件箱或下方标签清空文件夹树点击效果 1.tree上需要设置node-key 2.点击其他的方法中加入 |
4. Screenfull使用
screenfull
npm i screenfull@5.1.0
less-loader
npm i less-loader@6.0.0
5. vue-video-player
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
原因竟是因为文件夹只读
6. AudioContext报错
Uncaught TypeError:Failed to execute 'createMediaElementSource' on 'AudioContext':parameter 1 is not of type 'HTMLMediaElement'
解决方法
这个问题就判断是否有audioContext（即改为全局）
medioElementSource是否已经创建（即改为全局）
7. protobuf
repeated 表示的是数组
required 表示的是必选一个
oneof 表示只选择其中一个
map 表示一个键值对列表
8.使用tinymce
在使用时，需要注意引入,请转
Vue3使用tinymce富文本编辑器_szx的开发笔记的博客-CSDN博客_vue3 富文本
引入之后黏贴文本，就没有了样式，黑秃秃的，搜索的结果是
删除或重命名paste，ok！这时候报错了！
说找不到paste，代码里有什么呢！
这一个我注释掉了！but还是报错！为什么呢！
因为这里还有一个！！！！！！！！！！！
找我一天------删除掉就好啦
上传本地图片参考的有点多，这里总结一下
1. 首先如果使用的是上面连接的引入，需要在plugins和tools里面加入image插件
2.在初始化的方法中加入- images_upload_handler
images_upload_handler: async (blobInfo, success, failure) => {
let fd = new FormData();
fd.append("file", blobInfo.blob(), blobInfo.filename());
const res = await post(`接口地址`, fd);
if (res) {
console.log("这是图片连接", res);
success(res);
}
},ps：我这里的接口是使用FormData存储，参考地址为tinymce富文本编辑器实现本地图片上传_Li_na_na01的博客-CSDN博客_tinymce上传本地图片
视频上传请参考：tinymce 上传本地视频_小星落的博客-CSDN博客_tinymce上传视频
file_picker_callback结束后，就进入media_url_resolver，
media_url_resolver的data就是file中callback回来的
接口调用后展示请参考
tinymce编辑器上传本地视频 - 百度文库
9. vant 轮播图，指定宽度，指示器无法准确定位到最后一个item
实在不知道咋整，于是在数组后面再添加空字段，再隐藏多余指示器
:deep .van-swipe-item {
&:last-child {
display: none;
}
}
:deep .van-swipe__indicator {
&:last-child {
display: none;
}
}10. git冲突 提交报错
git reset --hard请勿模仿 我自己也不知道是啥
11. echarts单页面引用
import echarts from "echarts";//错误代码这个时候展示echarts 为undefined
import * as echarts from "echarts";//正确代码12. 词云
const lessColors = ["#43B49850", "#409EFF50", "#FEB61950"];
const moreColors = ["#43B498", "#409EFF", "#FEB619"];
const data = [
{
name: "杨氏双孔干涉",
value: 1000,
},
{
name: "分振幅法",
value: 600,
},
{
name: "明暗相间的条纹",
value: 300,
},
{
name: "分振幅法",
value: 600,
},
{
name: "光的干涉的应用",
value: 121,
},
{
name: "菲涅耳双镜干涉",
value: 311,
},
{
name: "分波阵面法",
value: 111,
},
{
name: "分振幅法",
value: 600,
},
{
name: "杨氏双孔干涉",
value: 1000,
},
{
name: "分振幅法",
value: 600,
},
]
const elem = document.getElementById("hot");
const echart = echarts.init(elem);
const option = {
tooltip: {
show: true,
},
grid: {
left: 0,
bottom: 0,
top: 0,
right: 0,
},
xAxis: {
type: "category",
show: false,
},
yAxis: {
max: 100,
show: false,
},
series: [
{
type: "wordCloud",
sizeRange: [12, 42],
rotationRange: [0, 0],
textPadding: 0,
gridSize: 20, //字距越大，字距越大。
left: "center",
top: "center",
textStyle: {
color: (v) => {
let avg = 0;
data.forEach((item) => {
avg += item.value;
});
avg = avg / data.length;
let index = 0;
if (v.data.value < avg) {
index = Math.floor(Math.random() * lessColors.length);
return lessColors[index];
} else {
index = Math.floor(Math.random() * moreColors.length);
return moreColors[index];
}
},
},
data: data,
},
],
};
echart.setOption(option);13. 数组深拷贝
const copyarr=JSON.parse(JSON.stringify(arr));
console.log(copyarr)14. Vuepress运行报错
参考上方博主的文章
window.global=window打包后报错
于是解决方法：再enhanceApp.js
export default ({ Vue, options, router }) => {
Vue.use(Menu);
window.global=window
}上述报错，还有可能是安装依赖版本的问题-在确认版本node版本没错的情况下
- 删除node_modules
- 删除package.json
- npm cache clean -f
- npm i
15. serve直接报错
① 删除node_modules
② 删除package-lock.json
③ 清理缓存
④ 重装
16. 动态require图片——require中加入变量
const val="carousel1.png"
let files = null;
let result = "";
files = require.context("@/assets/images", false, /\.png$/);
const arr = files.keys().filter((item) => item.indexOf(val) > -1);
const res = arr.map((item) => {
return files(item);
});
result = res[0];
}17. npm安装超级慢！不要怀疑
npm config set registry http://registry.npm.taobao.org18. vue-video-js在线视频加载过慢
百度了很多，例如 video.js视频过大加载缓慢、mp4转m3u8等等
但是其实。。可能只是忘记做了if判断跟直播流混在一起了，所以加载慢了！9m
19. el-menu-item跳转外部链接（本例子跳转新页面）
<el-menu-item
v-for="(item, index) in menus"
:key="index"
:index="item.path"
>
<!-- {{ item.name }} -->
<a :href="item.path" target="_blank">{{ item.name }}</a>
</el-menu-item>20. ElementPlus table自带filters筛选-动态更改选中内容
1） el-table-column:列项有【filtered-value】属性
2）el-table:设【key】是属性用于更新渲染表格
3）动态修改【filtered-value】的值之后、修改el-table中【key】
21. vue3 v-echart 图例点击事件
chartRef.value.chart.on("legendselectchanged", handleLegendSelect);
22. videojs 视频字幕样式修改
.vjs-text-track-cue {
background: green !important;
div {
background-color: transparent !important;
color: #fff !important;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
}
2899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
