【vue】vue +element 搭建及开发中项目中,遇到的错误提示
1.
import Layout from '@/views/layout/Layout';
export default [
{
// 配置路由,当路径为'/activePublic',使用组件activePublic
path: '/activeManage', component: resolve => require(['@/views/activeManage/index.vue'], resolve), },
{
// 配置路由,当路径为'/activePublic',使用组件activePublic
path: '/activePublic', component: resolve => require(['@/views/activePublic/index.vue'], resolve),//路由懒加载写法
children : [
{ path: '', component: resolve => require(['@/views/activePublic/step1.vue'], resolve) },
{ path: 'step1', component: resolve => require(['@/views/activePublic/step1.vue'], resolve)},
{ path: 'step2', component: resolve => require(['@/views/activePublic/step2.vue'], resolve)},
{ path: 'step3', component: resolve => require(['@/views/activePublic/step3.vue'], resolve)},
{ path: 'step4', component: resolve => require(['@/views/activePublic/step4.vue'], resolve)},
]
},
{
path: '/', component: resolve => require(['@/views/activePublic/index.vue'], resolve),
},//设置默认路径
]
错误:Module not found: Error: Can't resolve 'sass-loader' in 'D:\vue_test_project\vuedemo\src'
解决方案:需要安装安装sass-loader以及node-sass插件才能正常运行
cnpm install sass-loader -D
cnpm install node-sass -D
2.
操作:
错误:
解决方案:
import Siderbar from "@/views/layout/Siderbar";
import AppMain from "@/views/layout/AppMain";
3.操作:
import Siderbar from "@/views/layout/components";
import AppMain from "@/views/layout/components";
错误:
解决方案:
cnpm install --save babel-runtime。
4.操作
App.vue
created(){
require('./styles/common.scss');
}
错误:
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
解决方案:
cnpm install node-sass
5.使用Vue.js加sass时遇到 Invalid CSS after ".xxx{": expected "}", was "{" 错误的解决方法
解决方案:
这个问题涉及到 sass 和 scss 的区别。sass 的语法规则是一种缩进语法。而 scss 语法与 css 语法相近,使用大括号。上面那个例子中,home.vue 文件中的 style 标签,lang 属性设置成了 sass,代码如下: <style lang="sass" rel="stylesheet/scss" scoped> 然而 style 标签里面的内容是scss,这导致了编译器报错。所以为了解决这个问题,需要把上面的代码改成如下形式: <style lang="scss" rel="stylesheet/scss" scoped> lang 属性变成 scss,所有关于语法的地方都设置成 scss,这样问题就解决了。
相关链接:https://blog.csdn.net/zhangchao19890805/article/details/64122182
6.es6模式匹配
原因:let
不允许在相同作用域内,重复声明同一个变量。set那一行的x y z被重复定义
7.表单验证提示语为英文提示语
必填字段required写在哪儿的问题,要写在js中,否则在测试环境中会出现验证提示语为英文的问题
错误写法:
正确写法:
8.在同一个页面使用多个ElementUI中 Popover 弹出框(el-popover),需要指定不同的ref值,否则显示异常
<div>
qq:11
<el-popover
ref="popover"
placement="bottom"
width="400"
trigger="hover"
content=" 管理员上传课程附件(MP3、MP4、PDF、PPT、doc)所占用的储存空间。"
>
</el-popover>
<i v-popover:popover class="el-icon-question accountSetting-help" ></i>
</div>
<div>
wx:222
<el-popover
ref="popover"
placement="bottom"
width="400"
trigger="hover"
content="用户观看课程(MP3、MP4、PDF、PPT、doc)所产生的数据流量。"
>
</el-popover>
<i v-popover:popover class="el-icon-question accountSetting-help" ></i>
</div>
效果:
9.{{form.lang.name}} 造成的
Vue.js报错—TypeError: Cannot read property 'Name' of undefined
解决方案:
form:{ lang:{} }
10.form表单验证提示语问题
不显示提示语问题
解决方案:
相关链接:https://blog.csdn.net/u010865136/article/details/79374789
11.npm install 安装依赖一直失败
错误截图:
解决方案:
安装淘宝镜像,使用cnpm install
相关链接:https://blog.csdn.net/qq_38225558/article/details/86485843
12.报错比如,[Vue warn]: Do not use built-in or reserved HTML elements as component id: table
解决方案:给组件命名"table"造成的,不能使用html元素命名,改个名字就好了
13.报错[Vue warn]: Error in v-on handler: "TypeError: record is undefined",是因为路由跳转时写的不对
14.在使用Element中的Dialog弹框时,弹出框被遮盖层遮盖的问题
错误效果图:
原因:父级元素加了层级
解决方案:给dialog加一个 append-to-body 属性
15.在引入组件时,组件名在服务器端比较严格,有大小写问题
16.报错:TypeError: Cannot read property 'updateFieldButton' of null
比如:openPlatform: null
17.重置表单验证规则时遇到的错误提示
使用场景:点击按钮后弹出含有form表单的弹窗 并重置表单验证规则
直接使用
this.$refs['ruleForm'].resetFields() 会报上图错误
解决方案:
this.$nextTick(function () {
this.$refs['ruleForm'].resetFields()
})
在组件中标签没有闭合,报错:
Errors while compiling. Reload prevented.
./node_modules/_vue-loader@13.4.0@vue-loader/lib/template-compiler?{"id":"data-v-00822b28","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/_vue-loader@13.4.0@vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/BaseProject.vue
(Emitted value instead of an instance of Error)
解决办法:检查html代码
在配置路由并引入组件后,报错:
Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
错误原因:vue-router没有注册
解决办法:
【vue】vue +element 搭建及开发中项目中,遇到的错误提示的更多相关文章
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- eclipse中jquery.js文件有错误提示…
eclipse中jquery.js文件有错误提示的解决办法 2013-04-06 19:18 浏览次数:382 由于jquery.js文件进行了压缩,压缩之后的语法eclipse无法完全识别,所以有错 ...
- vue.js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- vue+webpack+npm搭建的纯前端项目
转载来源:https://www.cnblogs.com/shenyf/p/8341641.html 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当 ...
- iOS HmacSHA1加密 和 MD5 Base64加密 --iOS开发系列---项目中成长的知识五
项目中开发中需要对一些数据进行加密后和服务器验证是否是我们客户端发出的请求! 方案是服务器定的,使用HmacSHA1加密和MD5 Base64加密 加密过程比较复杂 1.获取格林威治时间 2.用bas ...
- iOS 控制section不悬停 --- iOS开发系列 ---项目中成长的知识八
一般情况下,tableview中的section是会默认不随着tableview的滚动而滚动的,而是会等到属于这个section的cell滑完过后,然后往上顶(不知道大家能不能听懂=_=!) 有些时候 ...
- iOS UIView中的坐标转换convertPoint --- iOS开发系列 ---项目中成长的知识六
如果你的UITableViewCell里面有一个Button需要响应事件,你会怎么做? 在Controller中使用 button父类的父类? 例如:UITableViewCell *parent ...
随机推荐
- Asp.Net中对操作Sql Server 简单处理的SqlDB类
好久不接触这些闲暇时间回顾一下以前的基础.因为平常使用的时候都是直接调用SqlDB.dll这个类.先看这个类的结构 纸上得来终觉浅,绝知此事要躬行.个人觉得里面的标准操作就是对数据库增删查改 .特别适 ...
- 2018-08-13 Head First OO分析设计一书略读与例子中文化
注: 此笔记仅为个人学习此教程的布局和材料组织之用. 如有兴趣请自行详阅. 第一章是以吉他商店的存货系统作例子. 第二章设计有狗洞的门. 第三章对第二章基础上, 更改需求后对应设计. 第四章继续改进此 ...
- Javascript 对象 - 数组对象
JavaScript核心对象 数组对象Array 字符串对象String 日期对象Date 数学对象Math 数组对象 数组对象是用来在单一的变量名中存储一系列的值.数组是在编程语言中经常使用的一种数 ...
- JMeter java.net.SocketException:Operationnotsupported:connect解决方案
java.net.SocketException: Operation not supported: connect解决方案 by:授客 QQ:1033553122 测试环境 apache-jme ...
- leetcode-70.爬楼梯
leetcode-70.爬楼梯 Points 斐波那契 动态规划 题意 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给 ...
- PyCharm 使用Github管理Django项目
不管是对于教程代码免费分享的需要,还是项目开发过程中的版本管理,Github都是我们首选的开源代码仓库,如果你没有私有仓库,并且不用保护代码,那么将项目上传到Github上是最佳的选择. 关于如何使用 ...
- ERP服务启动后无法连接数据库的解决方法
请安照步骤一步一步走,一个方法一个方法试. 方法一: 第一步,退出ERP 第二步,卸载sql服务,操作方法如下(win+R—输入cmd—输入sc delete mysql_sl 回车键) 第三步,重启 ...
- Orchard详解--第九篇 拓展模块及引用的处理
在分析Orchard的模块加载之前,先简要说一下因为Orchard中的模块并不是都被根(启动)项目所引用的,所以当Orchard需要加载一个模块时首先需要保证该模块所依赖的其它程序集能够被找到,那么才 ...
- Solr5.5高级应用(基于tomcat9)
一.配置solr 1.配置 注意:要是想放到其它路径下,可以修改此路径下的web.xml配置文件 修改内容如下: <!-- 将solrhome的绝对路径写入env-entry-value --& ...
- Visual Studio Team Services 动手实验
Visual Studio Team Services 动手实验 概述 为Visual Studio Team Services提供的动手实验,要完成实验首先需要满足以下条件: Visual Stud ...