vue开发中遇到的一些问题总结

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。


webpack 配置中 vue-loader 重复配置会导致组件不能被解析

报错信息:

1
<!--function(e,t,n,r){return rn(i,e,t,n,r,!0)}-->

组件显示不出,仔细检查webpack.base.config.jswebpack.dev.conf.jswebpack.prod.conf.js中的vue-loader配置是否重复了!

webpack 中 css 编译器不支持编译-webkit-box-orient 属

在实现多行文本省略时,会用到这三行语句

1
2
3
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

但是很不幸,如果你用了 webpack 并且使用了 optimize-css-assets-webpack-plugin 这个插件,那很有可能你的-webkit-box-orient: vertical编译不了。页面上没有效果

遇到这种情况,有两种解决方案。


一、 在 css 中用这条语句包裹,让插件失效

1
2
3
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

二、 在webpack.prod.conf.js中找到下面这条语句并注释掉

1
2
3
4
5
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
},
}),

vue 中页面需要在线图片作为背景时

一般页面背景图都是写在 css 中,但是图片地址是后台传的,那么背景图就需要写在内联样式上了,解决方法为在data中定义一个背景对象,使用v-bind:style来绑定 css 样式!

在 vue 中使用 transition 标签进行过渡动画要延迟很长时间!

有些手机(小米 2s)会间隔很长一段时间才过渡。

解决方法:在要过渡的标签上再加一次过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.fade-start-enter-active,
.fade-start-leave-active {
transition: opacity 1s;
}

.fade-start-enter,
.fade-start-leave-to

/* .fade-leave-active below version 2.1.8 */
{
opacity: 0.3;
}

/* ---------------------------------- */
/* 在要过渡的元素上再加一次 */
/* ---------------------------------- */
.item {
transition: opacity 1s;
}

.fade-start-enter-active,
.fade-start-leave-active {
transition: opacity 1s;
}

.fade-start-enter,
.fade-start-leave-to

/* .fade-leave-active below version 2.1.8 */
{
opacity: 0.3;
}

在 php 页面使用 vant 需要闭合标签

如在 vant 中,引用 cell 组件

vant 官方引入例子

如果是 php 页面,需要闭合标签,否则会出现错乱

1
2
3
4
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

 

所以在 php 页面,标签需要闭合,貌似 php 采用的是 xhtml 解析方式,xhtml 标签需要闭合

1
2
3
4
<van-cell-group>
<van-cell title="单元格" value="内容"></van-cell>
<van-cell title="单元格" value="内容" label="描述信息"></van-cell>
</van-cell-group>