element UI表格排序sortable最简单的按大小排序，需要添加prop,不然无法使用
表格后面增加的sortable没有作用
解决办法：没有给表格添加prop属性
<el-table-column align="center" label="闸门名称" prop='gatename' sortable>
<template slot-scope="scope">
<span>{{scope.row.gatename}}</span>
</template>
</el-table-column>
表单清空没有效果，也不是提示报错的原因
解决方法：model中绑定的数据字段和Dom里prop的数据字段是不是完全一致
tagview 下拉关闭菜单窗口对不上
侧边栏 顶部固定定位 偏移距离引起的
解决办法：下拉关闭菜单事件x要减去想对应的距离
组件内的样式优先级大于外链全局样式
比如在一个页面里写了一个类名+样式，在其它页面也要用到这个类名，在其它页面第一次刷新时，样式不起作用，而要在设置样式的页面
刷新后，其它页面的样式才会被渲染出来
解决办法： 把样式写在全局文件index里面 styles---index.scss
Dialog 对话框 Vue开发中出现对话框被遮罩层挡住问题解决方案
解决办法：在el-dialog 标签上增加这个属性 :modal-append-to-body="false"
indexOf() 方法可返回数组中某个指定的元素位置。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
A complete log of this run can be found in:debug.log
npm版本太低的原因
全局更新 npm
npm install npm -g
一、npm 的更新：
查看自己的 npm 版本：npm -v
查看官方文档可知，使用命令 npm install npm@latest -g
注意：一定要全局安装，不然node-v还是得到没更新之前的版本
二、node 的更新：
去官网下载需要的版本
我们在覆盖的时候要检查之前安装 node 的路径，使用命令 where node
也就是说我之前安装在 C:\Program Files\nodejs 文件夹下。覆盖安装和前面讲到的第一次安装方法相同，只是安装路径选择为同之
前一样的路径。
安装完后检查是否安装成功 node -v npm -v
编译插件vue-devtools，npm run build后报错 npm ERR! code ELIFECYCLE
错误原因：因为最新版本vue-devtools使用最新版本webpack4，所以node版本至少大于6.11.5
解决办法：卸掉以前装的node，到官网下载安装一个最新版本的node
style 加scoped问题不起作用
scoped 只是针对自定义的增加的类名，id, elment默认样式加scoped不会被渲染出来,
如果我们子组件添加scoped，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的;
若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,
那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式;
覆盖element默认样式，不同的页面设置不同的值
解决办法：在原有的元素外面包裹一层DIV, 然后在每一个页面设置不同的值，如果只设置一个页面，那么所有页面的样式都会是一样的
表格数据懒加载圈圈位置跑到表格下面去了
解决办法：v-loading.body='boolean' 改成 v-loading='boolean'
更换主题颜色后 el覆盖样式不起作用了
解决办法：更改element默认的样式
deep深度选择器ie不支持 首页图标三条横线颜色更改不了
解决办法：用fill属性控制svg图标的颜色
<style scoped>
.el-dialog__wrapper /deep/ .el-dialog {
width: 60% !important;
}
</style>
项目启动时遇到以下错误：This dependency was not found.........
This dependency was not found:
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue
in ./src/components/a.vue
To install it, you can run: npm install --save
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu
解决方案： 一般提示出现什么什么找不到时，就是缺少相关依赖包，按提示重新安装提示的依赖包即可
npm install sass-loader --save
npm install node-sass --save
[Vue warn]: Duplicate keys detected: ‘101121201’. This may cause an update error.
解决方案：使用v-for遍历时，没有设置key值
注意：key值是必须唯一的，如果重复就会报错，可以把key值改为index（其实就是用索引做key值），就可以避免这个情况：
<ul>
<li v-for="(item,index) in array" :key="index">{{item.name}</li>
</ul>
找不到未定义的resetFields属性
vue.esm.js?efeb:591[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'validate' of undefined"
[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"
解决办法：给表单添加ref属性
我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：
1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到
数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以
Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：
push() //向数组的结尾添加一个或多个元素并返回新的长度
pop() //删除元素并返回数组的最后一个元素
shift() //向数组的开头添加一个或多个元素并返回新的长度
unshift() //删除元素并返回数组的第一个元素
splice() //删除元素并返回被删除元素的数组
sort() //对数组中元素进行排序
reverse() //颠倒数组中元素的顺序
split() //方法用于把一个字符串分割成字符串数组
vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
Vue 不能检测以下变动的数组：
① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
② 当你修改数组的长度时，例如： vm.items.length = newLength
三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。
常见状态码错误
Request failed with status code 400
解决方法：把传给后台的时间参数转换成时间戳的格式
Error occured while trying to proxy to: localhost:9527/api//auth/jwt/token
Failed to load resource: the server responsed with a status of 504 (Gateway Timeout)
解决方法：后台服务器可能没有启动
errError: Request failed with status code 401 (Unauthorized)
解决方法：交给后端开发人员处理
常见状态码解释
200 请求成功
304 请求的页面没有修改
400 请求语法错误服务器不理解
401 请求要求用户的身份信息
403 服务器理解请求客户端的请求，但是拒绝执行此请求
404 请求资源找不到
500 服务器内部错误，无法完成请求
504 充当网关或代理的服务器 末及时从远端服务器获取请求
如果进去某个页面后，这个页面突然卡住不能动，可能页面中那个标签嵌套不合法 比如查看el-table后面是否多了一个>符号
Do not use built-in or reserved HTML elements as component id:filter 不能用内置的元素作为组件的id名称
不能登录系统并提示error occurred while trying to proxy request /api//xx/xx/xx to http://192.168.1.188:8765
解决方法：
1 看有没有断网
2 服务器的IP地址有没有变
3 服务器地址能否ping通(ipconfig)，如不能拼通，查看本地防火墙是否开启
Error: listen EADDRNOTAVAIL 192.168.1.166:9527
Error: listen EADDRNOTAVAIL 192.168.1.166:9527
at Object._errnoException (util.js:1024:11)
at _exceptionWithHostPort (util.js:1046:20)
at Server.setupListenHandle [as _listen2] (net.js:1334:19)
at listenInCluster (net.js:1392:12)
at doListen (net.js:1501:7)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:678:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shopapp@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shopapp@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Program Files\nodejs\node_cache\_logs\2018-08-28T03_29_03_820Z-debug.log
监听一个当前电脑上不存在的ip的时候，是会出现上述该错误的。比如说原来我的电脑连着一个无线网，并且检查ip地址为192.168.1.123，并且我也用该地址进行监听。但是一旦电脑断开无线网，电脑上无该ip地址，若再次用该地址进行监听，则会出现上述错误。
将这个异常名字分解开来就是E ADDR NOT AVAIL
E：Error
ADDR：Address
NOT：Not
AVAIL：Available
解决方法：查看本地IP地址是否正确
提示帐户和密码错误，并且报错400 bad request
原因是前端字段类型与后端字段类型不一致
比如时间 数量 单价 价格 里数
编辑数据时input报红，原因是验证规则问题
URIError: Failed to decode param '/%3C%=h'
页面入口文件index script标签src路径有问题 h tml字母h后面多了一个空格
解决方法：去掉多余的空格
控制台调试出现两个重复的样式
可能element-ui第三方框架 库模板里面主题index.css文件里多写了一份css样式
路径如下
// const url = '../../../node_modules/element-ui/lib/theme-chalk/index.css'
解决方法： 去掉UI组件默认样式里面的多余css样式
子路由的值必须是数组, 不然报错router.children.some is not a function
baseRoute: {
path: '/baseManager',
component: Layout,
redirect: 'noredirect',
name: 'baseManager',
authority: 'baseManager',
meta: {
title: '基础配置管理',
icon: 'setting'
},
children: [
{
path: 'userManager',
component: _import('permission/admin/user/index'),
name: 'userManager',
authority: 'userManager',
meta: {
title: '用户管理',
icon: 'fa-user'
}
},
{
path: 'menuManager',
component: _import('permission/admin/menu/index'),
name: 'menuManager',
authority: 'menuManager',
meta: {
title: '菜单管理',
icon: 'category'
}
},
{
path: 'groupManager',
component: _import('permission/admin/group/index'),
name: 'groupManager',
authority: 'groupManager',
meta: {
title: '角色权限管理',
icon: 'group_fill'
}
}
]
},
模板标签套错，提示- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
错误写法：
<template>
<div></div>
<script></script>
</template>
正确写法：
<template>
<div></div>
</template>
<script></script>
实列上的select没有被定义，提示如下报错
Property or method "select" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
El-dropdown标签格式没有嵌套正确，提示如下报错
[Vue warn]: Injection "dropdown" not found
Vue js webpack模板里import路径中@符号是什么意思
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 默认路径代理
// 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
alias: {
'@': resolve('src'),
'@config': resolve('config'),
'vue$': 'vue/dist/vue.common.js'
}
}
@等价于 /src 这个目录，免得你写麻烦又易错的相对路径，@这是webpack的路径别名
./代表当前项目
../代表上一级项目/是根目录
import vue1 from 'vue' 这句话的意思是： 加载vue模块，并输入变量vue1。
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果是模块名，不带有路径，那么必须有配置文件，告诉js引擎该模块的位置。
字符串与对象互转
Array.toString()是将数组转化成字符串，因此不带 [ ]
JSON.stringify(Array)是从一个对象解析出JSON字符串，是带[]的
JSON.parse() 是用于从一个字符串中解析出json对象
注册组件时，组件名称中间需要用连字符，不然会报错
<template>
//模板中调用组件
<home-notice :options="options"
:list.sync='list'
@hidePanel='hidePanel'
@openPanelDialog='openPanelDialog'
@changeDrag='changeDrag'>
</home-notice>
</template>
<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
export default {
components: {
draggable,
Sortable,
'base-map': () => import('./components/baseMap')
'home-notice': () => import('./components/homeNotice'), //引入并注册组件
'upload-image': () => import('@/components/Upload/uploadImage')
}
}
</script>
增加修改表单时，提示错误 Pre:TracePreZuulFilter
原因：传给后台的参数位置顺序放反了
富文本编辑内容返回的数据带标签，后台返回的数据带标签
<!-- 解决办法： 使用v-html指令解析标签 -->
<el-table-column min-width="500" align="center" label="内容" show-overflow-tooltip>
<template slot-scope="scope">
<span v-html='scope.row.content'></span>
</template>
</el-table-column>
<router-link :to={path:'',query:{}></router-link>页面跳转后新页面内容不会自动刷新
//解决办法： 增加以下路由钩子函数，当路由变化时根据id在数据库查找数据，发生create钩子函数之前
beforeRouteEnter(to, from, next) {
next(vm => {
console.log(vm)
// 这里vm就是当前页面的实例，可以执行methods中方法
if (vm.$route.params.id < 1) {
vm.$refs.form.resetFields();
// vm.form.imagerBase64 = undefined
vm.dialogStatus = 'create';
} else if (vm.$route.params.id) {
vm.getList();
vm.dialogStatus = 'update';
}
})
}
vue2.0中.vue文件页面跳转传递参数并获取
//声明式标签写法
<router-link :to="{path:'wlWaterWorkSituation',query:{id: this.listData[index].id}}"></router-link>
<router-link :to="{name:'wlWaterWorkSituation',params:{id: this.listData[index].id}}"></router-link>
//编程式js写法
this.$router.push(path:'wlWaterWorkSituation',query:{id: this.listData[index].id}})
//页面中获取参数
this.$route.query.id
this.$route.params.id
$route为当前router跳转对象里面可以获取name、path、query、params等
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
返回上一个history也是使用$router.go方法
拖拽排序不起作用：拖拽元素一定要放在draggble标签内
<draggable v-model="tags"
:move="getdata"
@update="datadragEnd">
<!-- <transition-group> -->
<div v-for="element in tags"
:key="element.id">
{{element.name}}
</div>
<!-- </transition-group> -->
</draggable>
MapBox介绍
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '? <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
L.map('map')就是捕获一个<div id="map"></div>，把它当作一个地图观察器，将地图数据赋予上面。
setView设置地图中心点的经纬度和比例尺，作为用户的视图区域。
L.tileLayer就是矢量瓦片底图，用对应的URL上找对应的z，y，x。而s是分布式服务器快速选取，一般都是1-4，天地图做到了1-8。
tileLayer图层要addTo(map)加载在地图观察器上。例子当中瓦片底图使用的是openstreetmap，当然也可以使用天地图的瓦片数据作为一个家庭作业留给你们，参考htoooth/Leaflet.ChineseTmsProviders。
L.marker就是图标，首先需设置的是图标的坐标，bindPopup是绑定的冒泡提示，里面可以包装任意的innerHTML元素，openPopup是开启提示的方法。
还没有整理完全，后面有时间继续完善
来源：CSDN
作者：weixin_41697323
链接：https://blog.csdn.net/weixin_41697323/article/details/97807163