vue项目创建很慢的解决方法
检查node和npm版本是否过低
node -v
npm -v
更新npm和node
npm install -g npm
npm install -g n
更改淘宝镜像
npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org/) --global
npm config set disturl [https://npm.taobao.org/dist](https://npm.taobao.org/dist) --global
axios请求中，参数只传递一个值，而非一个对象
// 在请求中加入以下内容
headers: {
'Content-Type': 'application/json;'
}
vue文件流（blob）下载
// 在axios请求中加入以下内容
responseType: 'blob'
调整element ui组件样式
方法一
在不带scoped的style标签中写样式。最好在要调整的组件的外面报上一层标签，给这个标签设置class。这样防止修改整个项目中的该el标签样式
方法二
使用样式穿透/deep/
el-table多选，换页回显
// 给el-table绑定属性row-key，可以定义一个函数，这个函数要返回独一无二的值作为row-key
// 给多选框列绑定属性 :reserve-selection="true"
getRowKeys (row) {
return row.id
}
微信端项目调试
1.npm serve
2.下载微信开发者工具
3.用开发者工具访问项目链接
4.用微信登录
5.在开发者工具中获取token等数据，在项目的相应位置设置这些数据（如vuex中）。
6.在浏览器中访问项目链接
el-tabs下边框线
是.el-tabs__nav-wrap::after的样式
父元素min-height
父元素设置了min-height，子元素无法继承height属性，即子元素height: xxx%无效
解决：给父元素外层再包一层div，并给外层的这个div设置display:flex
备注！！！！！！！！！！！！！！！！！！！！！！
如果给父元素设置了定位(非static)，且子元素是absolute定位，或fixed定位（但父元素要设置transform或perspective 或 filter，才能将视口改为父元素），则子元素height设置百分比，可以取到用父元素的真实高度（应该是因为子元素设置了absolute后，仅根据非static的父元素来定位，所以高度等数据是在父元素计算完成后才计算的，因此能取到值）
当仅有1个子元素时，也可以父子元素都不加定位，父元素设置display: grid后，子元素高度百分比就可以取到了
el-submenu手机端 水平菜单 子菜单问题
子菜单点击显示/隐藏
点击子菜单的选项，先隐藏再弹出一次
都可以用menu-trigger="click"解决
header main footer布局样式
将footer设置为absolute定位并设定高度h，且为main的子元素。将main设relative定位，且padding-bottom:h
多行文字，超出部分省略号
给元素设置
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;/*文字行数*/
-webkit-box-orient: vertical;
el-upload自动上传文件
在changeFile中调接口
当路由'/xxx'没有对应组件时
在vue router中，设置
{
path: '/xxx',
redirect: '/xxxxxxx'
}
未定义路由
在routes数组加入
{
path: '*',
component: () => import('xxx/xxx.vue')
}
多级路由，title动态修改的问题
在父组件的钩子函数（如mounted）中
document.title = this.$route.meta.title ? this.$route.meta.title : 'default-title'
路由配置中，子组件的meta中写子组件的title
例如parent组件中用
{
path: '/son',
component: parent,
children: [
{ path: '', component: son, meta: { title: 'son-title } }
]
}
vue transition页面左右滑动 宽度重绘慢一拍
给切换到的页面加width:100%
在
![]()
的src存在referer头限制
在
参见https://www.jianshu.com/p/7a5be2fb7197
创建数组并赋值为0,1,2...n-1
new Array(n).map((cur, index) => index)
不可行！！！
原因：
https://www.jianshu.com/p/ff5cbc2c69be
js数组对未主动赋值的下标进行“空置”处理，即遍历不到该下标
而...解构可以将数组解构为length长度；apply也有相同的效果，给Array构造函数强行赋值n长度并map遍历
// 用...解构数组
let arr = [...new Array(n)].map((cur, index) => index)
// 或用apply
let arr = Array.apply(null, new Array(n)).map((cur, index) => index)
el-radio取消选择
给el-radio绑定原生点击事件
单选框
// 在methos中
clickRadio (e) {
if (e === 'radio1') {
if (this.xxx === 'one') {
this.xxx = 'two'
} else {
this.xxx = 'one'
}
}
}
vue动态添加对象属性，并将属性值绑定到v-if上。无效，属性改变，视图不变
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。应该使用this.$set(this.obj,属性名，属性值)给对象添加属性
如下写法，点击按钮是无法改变div的显示隐藏的
data () {
return {
list: [.....],
hide: {}
}
},
methods: {
triggerHide (index) {
this.hide[index] = !this.hide[index]
}
},
created () {
this.list.forEach((cur, index)=> {
this.hide[index] = false
})
}
正确写法
修改created中的代码
created () {
this.list.forEach((cur, index)=> {
this.$set(this.hide, index, !this.hide[index])
})
}
隐藏除表格外的滚动条
用:not()选择器
:not(.el-table__body-wrapper)::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
:not(.el-table__body-wrapper){
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.el-table__body-wrapper{
scrollbar-width: thin;
scrollbar-color: #535353 #ededed;
}
.el-table__body-wrapper::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
display: inline;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 8px;
box-shadow : inset 0 0 3px rgba(0, 0, 0, 0.1);
background : #DDDDDD;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
/*滚动条里面轨道*/
/*box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
border-radius: 8px;
background: rgba(255,255,255,0);
}
vue折叠动画
https://blog.csdn.net/sriting/article/details/106111020
vue首页骨架屏
vue项目默认的挂载是替换index.html中的，所以可以再该div中加入骨架屏的代码，当打开网页时，会默认显示index.html中原有的div#app，请求资源并挂载后，index.html中的div#app会被替换
骨架屏元素动画参考代码
.skeleton-bar {
//width: 500px;
//height: 50px;
//border: 1px solid red;
border: 1px solid #DDDDDD;
animation: loading 1.4s ease infinite;
-webkit-animation: loading 1.4s ease infinite;
background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(37%, #e3e3e3), color-stop(63%, #f0f0f0));
background-image: -o-linear-gradient(left, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
background-size: 400% 100%
}
@-webkit-keyframes loading {
0% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
@keyframes loading {
0% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
PC端vue 滚动分页
核心是监听scroll事件，4个重要数值
scrollTop：滚动条距离顶部的距离
clientHeight：浏览器窗口高度
scrollHeight：列表元素内容的高度
bottomHeight：距离底部多远的时候加载新数据
这4个数值满足以下关系时，加载新数据
scrollTop +clientHeight >= scrollHeight - height
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
clientHeight = window.innerHeight,
scrollHeight = this.$refs.xxxxxx.scrollHeight, // xxxxxxx是自己定义的ref
height = 200 // 根据项目需求来
需要注意的问题
1.如果是多层router-view嵌套，要注意scrollTop的值
在浏览器里，一层层网上找，看每一层，之道body的高度是否正确，正确的那个才是能获取到scrollTop的。
我的做法是取消html,body,#app的高度，都是适应内容，所以scrollTop可以用上面的方式获取，否则可能为0
2.注册和取消监听事件
如果router-view没用keep-alive，可以在mounted和beforeDestroy钩子里注册和取消
否则在activated和deactivated里注册和取消
打开弹窗 阻止页面滚动
在打开弹窗时设置
document.body.style.height = '100vh'
v-for 中动态绑定ref
直接绑定会有问题，如获取不到
解决：
vue3中似乎有新特性解决此问题，后面再研究
在v-for中给ref绑定一个固定的字符串，在获取的时候用下标获取
// template
// script
this.$refs['itemNode'][index]
vue引入cdn
当组件需要import xxx from 'xxxxx cdn'时，我目前采用的方法肯定不是最优解，但有用。
// 在index.html中，加入
// 在组件中
let xxx = window.xxx
在拦截器中获取当前路由
先引用vue-router对象，用router.currentRoute.path
列表中 不同item高度相等，内容对齐
如商城，很多商品，商品展示图片，名字，价格。名字不一样长，有可能要换行，则只用flex布局对不齐
列表考虑使用grid布局，item使用flex
禁止ios浏览器自动缩放
在index.html的head中加入
有时手机浏览器会自动放大页面，加入上面的meta禁止页面缩放