（一）vue
1.页面加载速度优化
-
可在页面引入组件时引入异步加载的方式使加载速度变快
export default { name: '', components: { DataPane: () => import('@/components/DataPane'), DataPaneItem: () => import('@/components/DataPaneItem'), DateSelectLine: () => import('@/components/Basic/DateSelectLine') }, data() { return { arrowDown: require('@/assets/arrow-down.png'), iconTip: require('@/assets/icon-tip.png'), } } -
用
keep-alive、v-once、v-pre-
keep-alive：-
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 - 和
<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。 - 当组件在
<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。
-
-
v-once：- 对低开销的组件使用
v-once。只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。 - 但是不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它是完全没有必要的
- 对低开销的组件使用
-
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
-
2.移动端适配
- 嵌套在
app中时，顶部需预留间距 -
iPhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案：-
viewport-fit的默认值是auto。跟contain表现一致 -
当我们设置
viewport-fit:contain（可视窗口完全包含网页内容）。constant函数设置safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom等参数不起作用 -
viewport-fit:cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外，当我们设置viewport-fit:cover时：设置如下<meta name="viewport" content="width=device-width,initial- scale=1.0,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px; /* iOS 11.0 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ padding-left: constant(safe-area-inset-left); //如果为竖屏时为0 padding-right: constant(safe-area-inset-right); //如果为竖屏时为0 padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px }
-
一般我们只希望 iPhoneX 才需要新增适配样式，我们可以配合@supports 这样编写样式：
@supports (bottom: constant(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
}
}
高版本的写法（用env函数，且要放在constant函数下方）
env(safe-area-inset-top, 20px)：env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值
-
date对象参数不能包含.符号，不然会有问题 - 最好使用
rem单位，以下是它的设置方法
data(){
return {
screenWidth: document.body.clientWidth,
timer: false,
}
},
created() {
this.refreshRem()
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
this.refreshRem()
})()
}
},
watch: {
screenWidth(val) {
//这里用到了节流
if (!this.timer) {
this.screenWidth = val
this.timer = true
setTimeout(() => {
this.refreshRem()
this.timer = false
}, 400)
}
}
},
methods:{
refreshRem() {
const docEl = document.documentElement;
const rem = this.clientWidth / 3.75;
docEl.style.fontSize = rem + "px";
}
}
3.好用的插件
-
moment.js：JavaScript日期处理类库npm install moment --save -
vue-ls：npm install vue-ls --save-
Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage - 一个
vue封装的本地储存的方法 - 一种可以设置有效期的本地存储方式
-
4.其他
- 列表中页面刷新时，之前存入store中的数据可能会消失，可以使用sessionStorage缓存起来，比如在beforeUpdate中用sessionStorage存入数据，在created中读取数据并放入store中
- 调用接口时使用
try{}catch：可以捕捉异常，比如字段没有被定义，接口报错等 - 页面高度不固定时添加水印，需要注意在下拉加载后再调用一遍生成水印的方式
- 封装组件时注意子组件
props的值不能直接操作 - 鼠标移入移出动态设置
style样式<div :class="[{ normalStyle: !isMouseOver }, 'home-card-to']" @mouseover="isMouseOver = true" @mouseleave="isMouseOver = false" > <div class="home-card-to-item" v-for="(toItem, toIndex) in item.to" :key="toIndex" :style=" isMouseOver ? `transform: translate( 0px,${40 * toIndex}px)` : `transform: translate(${18 * toIndex}px, 0px)` " >uuu</div> </div> - 用css和vue作出tab切换效果
<div
:class="{'bar-item selected': index === selected, 'bar-item': index !== selected}"
v-for="(item, index) in items"
@click="handleItemClick(index)"
:key="index">
<div class="item-text">
{{item.name}}
</div>
<div class="item-border" v-show="selected === index"></div>
</div>
data:{
selected:0
}
methods: {
handleItemClick(index) {
this.selected = index
}
}
（二）Element UI防踩坑指南
1.el-slider组件
<el-slider
v-model="value"
show-stops
:step="10"
range
:format-tooltip="formatTooltip"
:max="70"
@change="ageChange"
></el-slider> #max应设为step的整数，这样会避免undefined的情况发生
2.el-table组件
当el-table有多选框时，有这样两个方法select和selection-change
| 事件名 | 说明 | 参数 | ||||
|---|---|---|---|---|---|---|
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row | 短文本 | 中等文本 | 稍微长一点的文本 | |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
注意：
-
select是用户手动在多选框checkbox中打勾才会触发的事件 - 而
select-change是多选框选中的值发生变化就会触发的事件，比如调用toggleRowSelection方法切换某一行的选中状态时，会触发select-change事件
3.vue中element-ui实现的slot分发和route路由
#单个激活 并以 index 作为 path 进行路由跳转
<el-menu unique-opened router v-show="!collapsed">
#动态路由到子组件 将不可见的路径隐藏
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
#用el ui 的title进行slot分发菜单
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
#item.name和item.children.name来配置菜单栏和子菜单栏的名称
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">
{{child.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
<i :class="item.iconCls"></i>
{{item.children[0].name}}
</el-menu-item>
</template>
</el-menu>
4.element-ui组件中方法调用问题
<el-input type="text" :placeholder="fileName" v-model="uploadForm.reNameTxt" @keyup.enter.native="reNameSuccess"></el-input>
@keyup.enter.native多加了个native
注意！！！如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native
当一个
form元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在<el-form>标签上添加@submit.native.prevent;
即@submit.native.prevent是用来阻止默认行为的
5.el-upload组件使用
<el-upload
class="avatar-uploader"
:http-request="handleGiftImgUpload"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="
(res, file) => {
return onUploadSuccess(res, file)
}
"
>
<img v-if="bindForm.urlPic !== ''" :src="bindForm.urlPic" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
if (!isJPG) {
this.$message.error('只能上传图片格式!')
}
return isJPG
},
handleGiftImgUpload(fileObj) {
const formData = new FormData()
formData.append('file', fileObj.file)
return giftManagerUpdateImage(formData)#接口名字
},
onUploadSuccess(res) {
this.bindForm.urlPic = res.data
},
(三)webpack
可以看我的另一篇文章：webpack构建
网友评论