Vue踩坑记录册

1、vue-cli+webpack项目修改项目名称

解决办法：

1 删除 node_modules 文件夹（如果修改项目名称，需要在在package.json中修改对应的name）

2 重新安装依赖 cnpm install

3 启动项目 cnpm run dev

2、mock(数据模拟)

解决方法：1、使用express搭建静态服务2、使用 JSON Server 搭建 Mock 服务器3、直接将用来测试的静态json资源放到static目录下，可以直接读取。4、通过mockjs来模拟相关测试数据。

原文地址：https://www.cnblogs.com/liuyp-ken/p/9295643.html

时间： 2024-11-05 18:46:42

Vue踩坑记录册的相关文章

Vue踩坑记

首先,第一点: 定义一个模板 home.vue <template> <div class="hello"> <h1>hello</h1> </div> </template> <script> export default { name: 'hello', data () { return { } } } </script> 这些是必须的,不然会报错然后是路由中定义只要import 了

vue 踩坑--项目名称不能与插件名称一样

今天webpack搭建,命令行一直报错百度说是项目名称为:vue npm 拒绝安装后来才发现是 package.json的name名称也设成了vue 所以修改一下就可以了.

在vue的template里,注意驼峰写法,如: :style="{marginLeft:`-${mleft}px`}" 在一个methods里调用另一个methods: this.$options.methods.function.bind(this)();//可用 this.function();//可用 this.$options.methods.function;//不好用目前并不知道什么情况,有空研究下来更在定时器中想改变data中的值 let self = this;

vue踩坑记录:[Vue warn]: $attrs is readonly.

今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果.网上搜了一圈后,发现是使用的vue与vue-tempalte-compiler的版本不一致造成的.当时使用的vue是最新版本2.6.10,而vue-template-compiler版本是2.5.21. **解决方法:** 降低vue的版本至2.5.21. `npm uninstall vue`

vue 踩坑 2

export default { name: 'App' } 这样在 App.vue里有空行,也会报错解决办法一: 养成良好编码习惯,不留多余空行. 解决办法二: 在.eslintignore 里文件里添加 /src/ 因为 App.vue 在src文件里原文地址:https://www.cnblogs.com/tu-front-end/p/10743775.html

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅其实是最近在思考一些问题然后想实现方案的时候,就慢慢的查到这些方案老司机可以忽略下面的内容了 1)起因考虑到数据分离的问题因为server是express搭的自然少不了res.render("xx",data) 这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通

Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined" found in

1.项目报错如下 2.原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3.解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5.总结:表达式有一层表达式(a),二层表达式(a.b),三层表达式(a.b.c), 当表达式三层的时候就有问题:比如a开始为空,a.b:的结果为undefined, a.b.c你再取的时候就会报错了 Vue(踩坑)vue.e

vue 之img的src是动态渲染时(即 :src=' ' )不显示踩坑

问题: <img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image"/> 解决方法: 加上require() 即可 <img :src="item.image ? require(`../../assets/image/${item.image}`) : ''" alt="image"/> vue 之img的sr

vue 组件传值踩坑日记 1

今天在用平时很少用到的传值方式,是V2.4以后新加入属性$attrs $listener 以及inheritAttrs. 总结:这样形式的代码适合套娃模式的组件传递,却不适合兄弟组件的传值,那样的传值方式,需要创建一个事件总线,说白了就是新new一个空的vue,详见,我的第二篇日志<vue 组件传值踩坑日记 2> 废话不多说,直接上代码,大家可以边看注释边测试一下效果吧 <!DOCTYPE html> <html lang="en"> <hea