vue简单项目从0搭建天坑记录

原创 木风622 随笔 vue 50阅读 14 天前 举报

近期上手vue看过了各种文档,决定来一个简单的例子练习一下,找到了被很多人模仿过的外卖店铺展示的项目,由于我是自己从0开始开发,和网上的代码会有所不同,可能其中的逻辑也不是很严谨,但是细节暂且不追究,在这里只记录一下遇到的坑;

问题一:初始化打包的时候控制台报错:You are using the runtime-only build of Vue where the template compiler is not available.

这个问题是入口文件和webpack打包产生的,在入口文件引入App组件是这么写的,

这种写法,按照官方解释就是“运行时构建不包含模板编译器,因此不支持 template 选项,只能用 render 选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为 render 函数。”,说通俗一点就是我们想使用template,我们不能直接在客户端使用npm install之后的vue,需要在webpack里配置一下即可:

问题二:用VUEX进行数据管理时,需要向取回的数据添加属性,无法添加,控制台会报错

开始发现问题的时候也是一脸懵X,自己看了下代码没有问题,其他数据也能成功获取到,就是无法获取添加的数据;后来经过查资料,发现对VUE添加新属性是不能直接用传统方式添加的,需要使用 vm.$set(target, key, value)方法添加,在VUEX中调用就是 VUE.$set(onj, name, val)

问题三:vuex+axios异步获取数据问题

这个问题主要就是异步取值和vuex的结合使用,解决方法有很多,不在具体细说,大神的文章说的很详细,附上地址(vue解决组件传值异步问题),我采用的是最后一种方式,完美解决。

问题四:使用axios调用本地json文件,控制台报404问题

这个问题产生的主要原因是来自于webpack配置有关,因为webpack配置有一部分是仿写了脚手架的内容,对copy路径问题导致,于是统一将图片、json和icon放置到了static文件夹内,并在配置里设置copyplugin时路径指向该文件夹。

问题五:better-scroll与vue的结合使用

这个问题也比较大了,因为页面涉及到部分滚动和点击跳转对应位置,自己写的话肯定会比较墨迹,有轮子可用还是不去造轮子了~,当然在使用中还是遇到了几个问题,第一个就是使用之后相关内容不能点击了,第二个是页面中使用v-if会报错,解决方案也都找到了,直接推荐几篇文章吧,各位请自取:one:当 better-scroll 遇见 Vue
two:记录vue项目中使用better-scroll插件实现滚动点击失效的问题
three: Vue+better-scroll 在v-if改变视图后无法滚动的问题

问题六:vue计算属性传参

在使用vue计算属性时,有时候需要传递参数,按照正常传参方式会出现问题,无法正常开发。针对这个问题可以使用methods和watch方法进行检测,还有一个方法就是大神说的闭包问题解决,附上简单代码:

问题七:关于scss设置二倍背景图、三倍背景图

这对于很多人可能都不是问题了,直接上代码:

问题八:自定义页面父子组件之间传递事件无效

此问题实在点击商品列表打开商品详情时遇到的问题,评价列表使用的是公共的组件,因此传递点击事件的时候使用的是父子组件之间的$emit,之前的调用是没问题的,但是此次调用却总是不生效。
最后发现原因,因为公共组件使用了better-scroll,并且设置了点击属性
if(!event._constructed){
return;
}
这个属性的意思就是检测event是否存在_constructed这个属性,存在就正常执行,不存在直接return;
但是商品详情页没有使用better-scroll,属于普通的页面,页面不存在event的_constructed属性,所以导致点击没有效果

已上几个问题就是在开发过程中遇到的小问题,有大众的问题也有个人的小问题,自己做个总结,以后也好填坑~具体代码还没有上传git,传上去后会更新链接,希望大神多多指点~

简单项目已经上传到github,各位大神请多多指点,不足之处一定改正;

github地址:vue_goods_demo

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

赶紧努力消灭 0 回复