Vue实战【Vue项目开发时常见的几个错误】

简介: Vue实战【Vue项目开发时常见的几个错误】

🌟前言

大家好,上一期的Vue实战都阅读了吗?上一期主要是讲解了Vue2中父子组件如何进行通信,通过父子组件通信我们可以把一些繁琐简单的工作抽离出来封装成组件,以便与我们更好书写代码。

相信大家在实际开发当中也会各种各样的控制台报错,今天博主就为大家总结一些,大家还有其他的也可以在评论区补充哦。

🌟安装超时(install timeout)

在我们拿到新项目npm install下载依赖的时候,经常会报的一个错误,方案有这么些:

cnpm : 国内对npm的镜像版本

cnpm website: https://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些

yarn 和 npm 改源大法

//使用 nrm 模块 : www.npmjs.com/package/nrm

npm config : npm config set registry https://registry.npm.taobao.org

yarn config : yarn config set registry https://registry.npm.taobao.org

当然条件允许的话可以上一些科技哈哈哈

🌟can’t not find ‘xxModule’ - 找不到某些依赖或者模块

这种情况一般报错信息可以看到是哪个包抛出的信息.,一般卸载这个模块,安装重新安装下即可.

🌟data functions should return an object

这个问题是 vue 实例内,单组件的data必须返回一个对象;如下

export default {
  name: 'page-router-view',
      data () {
      return {
        tabs: [
          {
            title: '财务信息',
            url: '/userinfo'
          },
          {
            title: '帐号信息',
            url: '/userinfo/base'
          }
        ]
      }
    }
}

为什么要 return 一个数据对象呢? 官方解释如下: data

必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data

仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!

简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题

🌟给组件内的原生控件添加事件,不生效了

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!---->

🌟我在函数内用了this.xxx=,为什么抛出Cannot set property ‘xxx’ of undefined;

这又是this的套路了,this是和当前运行的上下文绑定的;

一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;
解决方案:

暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)

箭头函数: 会强行关联当前运行区域为 this 的上下文;

🌟Uncaught ReferenceError: xxx is not define;

实例内的 data 对应的变量没有声明,你导入模块报这个错误,那一定是导出没写好。

🌟npm run dev 报端口错误!Error: listen EADDRINUSE :::8080

自己用 webpack搭脚手架的都不用我说了;Vue-cli 里面的 webpack 配置: config/index.js

dev: {
    env: require("./dev.env"),
    port: 8080, //  这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/bp-api": {
        target: "http://new.d.st.cn",
        changeOrigin: true,
        // pathRewrite: {
        //   "^/bp-api": "/"
        // }
    }
},

🌟the “scope” attribute for scoped slots …. replaced by “slot-scope” since 2.5

这个问题只出现老项目升级到 vue2.5+的时候, 提示就是 scope 现在要用 slot-scope 来代替,但是 scope 暂时可以用,以后会移除

🌟单组件中里面的 import xxx from ‘@/components/layout/xxx’中的@是什么

这是 webpack 方面的知识,看到了也说下吧…webpack可以配置alias(也就是路径别名),玩过 linux 或者 mac 都知道。

依旧如上,会自己搭脚手架的不用我说了…看看 vue-cli 里面的;

文件名: build -> webpack.base.conf.js

resolve: {
    extensions: [".js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围
    alias: {
      vue$: "vue/dist/vue.esm.js",  
      "@": resolve("src"),  // 这里就是别名了,比如@就代表直接从/src 下开始找起!!!
      "~": resolve("src/components")
    }
},

🌟Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String.

这种问题一般就是组件内的 props 类型已经设置了接受的范围类型, 而你传递的值却又不是它需要的类型,写代码严谨些 OK?

🌟Unknown custom element: - did you register the component correctly?

组件没有正确引入或者正确使用,依次确认

导入对应的组件

在 components 内声明

在 dom 区域声明标签

🌟Unexpected token: operator xxxxx

大佬,这个一看就是语法错误啊,基本都是符号问题, 一般报错会给出哪一行或者哪个组件

🌟跨域问题怎么破!比如No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

1: CORS , 前后端都要对应去配置,IE10+

2: nginx 反向代理,一劳永逸 <-- 线上环境可以用这个

线下开发模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable这么个玩意, 也可以做接口反向代理。

// 在 config 目录下的index.js
proxyTable: {
  "/bp-api": {
    target: "http://new.d.st.cn",
    changeOrigin: true,
    // pathRewrite: {
    //   "^/bp-api": "/"
    // }
  }
}
// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道

🌟Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素. 可以用v-if和v-else-if指令来控制其他元素达到并存的状态。

换个直白的解释,就是有一个唯一的父类,包裹者; 比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!

🌟写在最后

这篇文章分析那个了一些vue开发比较常见的报错,你是否也经历过呢?后续会为小伙伴们持续更新Vue的一些实战小魔法!各位小伙伴让我们 let’s be prepared at all times!


🌟JSON包里写函数,关注博主不迷路


目录
相关文章
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
11天前
|
JavaScript
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
13天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
36 4
|
13天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
25 1
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
27 6
|
13天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
35 1
|
18天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
26 1
|
13天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
50 0