- 问题一 swiper引入
- 问题二 视图更新后对元素进行操作
- 问题三 数据Vuex与props等
- 问题四 v-if 与 router-view选择
- 问题五 css中img的打包的问题
- 问题六 页面组件过渡效果
使用Vue2.x Vuex webpack axios仿慕课网app。
后续编写所遇到的一些问题与处理
问题一 swiper引入
报错
Cannot assign to read only property 'exports' of object '#<Object>'
经查是cmd与es7 import冲突的原因，参考他人项目未出现此问题。
方法一
将.babelrc中
"plugins": ["transform-runtime"],
//改为
"plugins": [],
//原因不太清楚
方法二
将静态文件swiper.js中src中的静态文件夹移入与src同级的static文件夹中
//涉及到webpack编译的问题
方法三
打开swiper将其cmd规范相关代码删除，可解决此问题。
方法四
将cmd规范改为export {Swiper}使用ES7规范
结果
解决此问题的过程中遇到了下面的几点
- babel 插件的使用(以后可能会根据业务需求配置)
src/assets与static的问题，涉及到webpack编译过程，目前像css与图片还没看出区别
问题二 视图更新后对元素进行操作
针对初始数据变化如从null到第一次获得数据后，对引起的视图更新dom做初始化处理的选择
点：created时watch已创建，created中进行的数据修改可被watch观测,updated初始状态发生在created之后,mounted之后，无法检测created数据改变引起的视图变化(其实视图还未渲染，故不触发updated)
情景一
数据变化发生在created，依赖dom操作，在watch中使用this.$nextTick
情景二
数据变化发生在mounted，依赖dom操作，在updated中直接执行代码
情景三
数据变化发生在mounted，依赖单一数据变化引起的domb变化操作，在数据对应watch中使用this.$nextTick
情景四
其他处理选择同情景二三
问题三 数据Vuex与props等
swiper.vue数据管理做的不好。可由vuex改为props
结果:
- 个性化数据(且偏展示型)通过
props由父组件向子组件进行传递 - 多组件公用数据(包括修改等)通过
vuex进行管理 - 暂不使用event bus或 $emit等方式
问题四 v-if 与 router-view选择
虽然大部分时候两者能达到同样的效果，但是按照功能区分，与交互状态或者数据状态相关的使用v-if，功能不同虽然表现可能类似还是使用router-view区分。同时重要的一点router内容可以按需加载。
问题五 css中img的打包的问题
static为与src同级目录
情景一 图片放入static 相对路径引入
url(../../../static/images/account-bg.jpg)
// dev、build正常
// 编译后
// dev
url(/static/img/account-bg.4446dc1.jpg)
// build
url(./static/img/account-bg.4446dc1.jpg)
情景二 图片放入static 根路径引入
url(/static/images/account-bg.jpg)
// 编译后
url(/static/images/account-bg.jpg)
// dev正常
// build 404
情景三 图片放入src/assets 相对路径引入
url(/src/assets/images/account-bg.jpg)
编译后
url(./static/img/account-bg.4446dc1.jpg)
// dev 正常
// build 正常
情景四 图片放入src/assets 根路径引入
url(/src/assets/images/account-bg.jpg)
编译后
url(/src/assets/images/account-bg.jpg)
// dev 404
// build 404
根据相关资料
- 详解配置文件
- 详解路径
- webpack官方文档解释
//当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换 // webpack-dev-server也会默认从publicPath为基准，使用它来决定在哪个目录下启用服务，来访问webpack输出的文件。 publicPath: ‘/’,
根据正常情况build编译后路径应该为output.publicPath+url-loader,然而根路径引入的资源未做任何处理。研究了很久file-loader未发现哪里对根路径做了限制，有时间再研究。
结论
由设计来说希望资源统一放在一个目录下，所以统一放入src\assets中并以相对路径引入。
删除static目录，去除webpack.prod.conf.js中copy任务。
问题六 页面组件过渡效果
组件使用<transition name="XX">过渡时会有白屏现象，组件加载时使用append方法，新增组件会将原有组件挤下去，出现白屏。所以使用position:absolution使新旧组件(page级别的)脱离文档流。最终采用所有过渡类名加
position: absolute;
will-change:translate3d;
z-index:999;
的方式。 针对主页做了如下的特殊样式
/*主页保持不动的假transition*/
/*不写transform会有闪屏现象*/
.keep-enter-active,
.keep-leave-active{
position: absolute;
}
.keep-enter{
position: absolute;
transform: translate3d(0, 0, 0);
}
.keep-leave-to{
position: absolute;
transform: translate3d(0, 0, 0);
}
测试样式的过程中又有transform会使z-index失效的问题。有兴趣的可以自己研究。