记一次难忘的vue踩坑经历

原创 友目大爻 教程 学习教程 110阅读 2018-11-12 14:17:00 举报

2018.11.12
重构第一天

1、vue如何使用vux
 1.项目里安装vux,vux-loader,less-loader,yaml-loader
  npm install vux --save  
  npm install vux-loader --save-dev 
  npm install less less-loader --save-dev 
npm install yaml-loader --save-dev
2.webpack.base.conf.js修改配置,在里添加less
resolve: {
extensions: ['.js', '.vue', '.json','.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
3.build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
最后加入
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
2018.11.13
重构第二天

1、使用vue-awesome-swiper,做轮播,遇到了一个大坑
import 'swiper/dist/css/swiper.min.css'
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
import { swiper, swiperSlide } from 'vue-awesome-swiper';
swiperOption: {
notNextTick: true,
direction: 'horizontal',
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
speed: 1000,
autoplay: 2000,
},
components:{
swiper,
swiperSlide,
}
这是源码,问题在哪?!
查了很久都查不出来,最后把autoplay: 2000改为了autoplay:true,成功了。。。
2、在多个vue方法和组件的情况下,this不一定指代的是当前vue环境,可能指代我们目前用的组件,那么如何使得指代vue环境的变量能一直存在呢,可以这么解决:
在script中首先定义一个变量:var that= {};
然后在创建实例前赋值:
beforeCreate(){
that = this; //将当前this赋值给that对象
},
再取that就是vue环境了

2018.11.22
重构第三天
今天遇到一个需求:列表页跳转详情页,再返回列表页时一切不变,不刷新,使用了keep-alive
写法如下:
app.vue:

router的index.js

keepAlive为true时,缓存,false,不缓存
然后就可以了。。。vue2.0+加入了exclude和include,设置组件name值,这个方法我用了但是没用。。。就不多说了

2018.11.27
今天要写的是vue的键盘事件,当点击回车按钮,vue如何判断呢?
html:

script:

ok
2018.11.28
今天项目基本上都写完了,主要就是解决bug.
1.之前在使用vux的drawer组件时遇到了一个问题,由于drawer是最外层元素,router-view作为其子元素,而在使用时,drawer这层最外元素上添加了一个属性:transform,然后出现了一个令人震惊的现象,其下所有fixed全部失效了,查了一下,果然父元素有transform,子元素fixed就会失效,但我项目里必须要实现头部的定位,怎么办,我首先使用了一种最容易想到的办法:使header和drawer脱离父子关系,写为并行,结果出现阴影时header就不在阴影里了,并且使用push时,header的宽度多了左边侧边栏的100px,变成了375+100=475,由于header变长,header内部的居中就向右移动了,问题很大,于是最终我就舍弃了这种方法,经过几次思考,我使用了这样的方法:由于vux组件里有sticky这个组件,粘性布局,于是我在header外部包了一个sticky,offset设为0,让header一直黏在top:0这个地方,解决了问题。
2.前几天遇到一个问题:页面中使用了两个swiper(vue-awesome-swiper),写了连个option,都有loop:true,但奇怪的是,一个可以循环,一个不行,对比发现,可以循环那个是data中就定义好的数据,即一开始就有数据,另一个则是ajax请求回来的,查了一下发现可能是因为数据还没回来就已经开始定义了swiper,于是,在swiper上加了v-if='showSwiper',data初始化的时候把showSwiper设为false,在数据回来后再把showSwiper设为true,就可以了。
3.返回上一页:

2018.12.04
今天遇到几个神奇的问题,记一下:
1.使用百度分享插件,却发现必须要刷新一次才能用,网上百度了一下,说要在beforeCreate里加上window._bd_share_main = ""

然而并没用
解决办法:
在mount里加了一个延迟

2.打包上线:
发布时输入npm run build,发现一片空白
解决方法:1.放在http服务器下,2.需要改一下config里的index.js
将build下的assetsPublicPath: '/',改为assetsPublicPath: './',即加一个点,然后再次npm run build,我将代码放在了nginx下面,通过localhost:70/XXX/XXX/index.html访问成功
3.上线后发现两行文本溢出变省略号的效果没了,打开调试发现页面上看不到-webkit-box-orient: vertical;这行代码了,查了一下才发现,原来webpack把代码过滤了
解决方法:

前后加两行代码就可以了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复