一、报错找不到.vue
明明路径没错，因为同一文件夹下存在同名的index.vue/index.js/index.css文件，所以配置的查找顺序一定要对。
webpack.base.conf.js中配置：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
默认先查找.js再找.vue再找.json文件，所以换一下顺序即可。
改为：extensions: ['.vue', '.js', '.json']
二、跨域问题的代理配置
/config/index.js中配置
proxyTable: {
'/api/**': {
target: 'http://10.10.17.63:8089/',
changeOrigin: false,
secure: false,
pathRewrite: {
'^/api': '/'
}
}
}
解释：
请求发送url，匹配/api的会代理到这里，目标地址是后台的IP+PORT。
pathRewrite的意思是将url中的/api替换为/即有如下效果。
目标访问后台接口：http://10.10.17.63:8089/loginUser
请求URL为：/api/loginUser，请求发送后会通过代理将目标路径拼接上并去掉拦截标识。
即将请求转发至http://10.10.17.63:8089/loginUser
三、jQuery的全局引入：
当前项目目录下运行命令 cnpm install jquery --save-dev
修改webpack.base.conf.js的两个地方：
const webpack=require('webpack');
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery'
})
]
其中为了将jequery的使用$符号与vue的$区别，在此配置使用jQuery代替$
很多地方说[要在main.js中加入import $ form 'jquery'即可全局使用]，但是好像不用这一步啊。
四、刷新或者加载出现变量闪烁再显示值的问题
<div id="app" v-cloak></div>
<style>
[v-cloak] {
display: none !important;
}
</style>
五、动画变换效果
问题：transition有时有效有时无效
.submit:hover {
color: #E0ECFF;
transition: 2s all; // 有用！！
}
.submit:active {
top: 30px;
/* transition: 2s all; 没点用 */
}
结果：因为top变换没有初始值！！！
思考过程：hover和active互换没影响、transition:格式更改没变化、color和top互换发现问题top没用。是不是float的原因呢？但是已经是相对定位了应该没有关系。
所以对比两者差距，答案只有一个，top没有给初始值啊！晕。
建议规范的正确写法如下：
.submit {
color: #ACE2F5;
top: 0;
}
.submit:hover {
color: #E0ECFF;
transition: color 2s;
}
.submit:active {
top: 30px;
transition: top .2s;
}
六、vue的生命周期
将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：
beforeRouteLeave：路由组件的组件离开路由前钩子，可取消路由离开。
beforeEach：路由全局前置守卫，可用于登录验证、全局路由loading等。
beforeEnter：路由独享守卫
beforeRouteEnter：路由组件的组件进入路由前钩子。
beforeResolve：路由全局解析守卫
afterEach：路由全局后置钩子
beforeCreate：组件生命周期，不能访问this。
created：组件生命周期，可以访问this，不能访问dom。
beforeMount：组件生命周期
deactivated：离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
mounted：访问/操作dom。
activated：进入缓存组件，进入a的嵌套子组件(如果有的话)。
执行beforeRouteEnter回调函数next。
七、webpackage配置
productionSourceMap：false， // 打包完后才会看不到源码
open: config.dev.autoOpenBrowser, // 自动打开浏览器
openPage: 'login', // 自动打开浏览器到指定页面
八、动态路由加载
/* 无语routeArray[0].children.push(routeChild)就报错
[vue-router] "path" is required in a route configuration. */
routeArray[0].children = routeChild
但是后面换了一种写法又不报错了，费解
九、console.log打印的问题
其实有时候打印的不是当前值，点开可以看到有个感叹号提示value below was evaluated just now
十、边界叠加的问题
有时候去掉border:1px solid transparent;div会移动因为边界叠加的问题
还有一种情况设置font-size: 0px;
十一、ajax发HTTP请求时报错：
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
中文翻译：
在主线程同步XMLHttpRequest是不赞成的，因为对最终用户的体验有不利影响。
原因：
以上警告信息在ajax方法执行同步操作（等有了返回值才执行下面的js，会短暂阻断程序继续执行）的时候出现，即：async:false。
如果业务层面允许，推荐异步执行AJAX，即将async属性设置为true。（async缺省下为true）
如果非要使用同步的Ajax（这种情况应该很少见），HTML5中增加了Worker对象，每个Worker运行在一个独立的线程中，Worker线程被阻塞一般是不会影响主线程和浏览器的。
十二、overflow失效
所有的overflow失效，尤其是overflow-x失效，是因为当前层的宽度未设置。
十三、...文字省略写法
文字外层容器设置如下：
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
十四、this.$confirm闪退的问题
<a href="#" @click="downloadDoc"><i class="iconfont" ></i></a>
downloadDoc () {
this.$confirm('是否需要下载帮助文档?', '下载', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
})
.then(() => {
this.helpDocDownload()
this.$message({
type: 'success',
message: '下载成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消下载'
})
})
}
初次点击a标签时，弹出框会闪退，再次点击正常。
因为href="#"会定位到页面顶部，即出现，点击弹出框外部导致弹出框退出关闭的效果。
将标签改为如下即可：
<a href="javascript:void(0)" @click="downloadDoc"><i class="iconfont" ></i></a>
十五、const和let的区别
let声明的变量可以改变，值和类型都可以改变，没有限制。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
十六、eslint启用和禁用
ESLint是一个代码规范和错误检查工具，局部禁用代码检查可将不检查部分代码夹在disable和enable之间，如下：
/* eslint-disable */
此区域内将不进行代码规范检查
/* eslint-enable */
十七、Vue.js devtool插件问题
报错：
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
1、刷新后打开开发者工具，没用。
2、更多工具-扩展程序-Vue.js devtools详细信息-允许访问文件网址打开，没用。
3、修改Users\***\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\对应版本下的manifest.json文件，
改
"background": {
"persistent": false,
"scripts": [ "build/background.js" ]
}
为
"background": {
"persistent": true,
"scripts": [ "build/background.js" ]
}
没用。
4、检查是否使用的是vue.min.js，恍然意识到打开的是服务器上的web系统使用的vue.min.js，打开本地的系统vue.js devtool能正常使用！！
十八、forEach究竟能不能改变数组的值
因为forEach效率高选用forEach，结果发现无法修改数组的值，详见
https://blog.csdn.net/ZhengKehang/article/details/81281563
总结：
若原数组oldArr的元素是基本数据类型，则如下：
oldArr.forEach((el)=>{
el = 2
})
是没法将数组oldArr中的每个值改成2的。
若一定要将原数组oldArr中的数值改为2，则可通过明确数组下标的方式修改，如下即可：
oldArr.forEach((el,index)=>{
oldArr[index] =2
})
十九、定时器的问题
原来有个定时器，这么写：
function MapInit (flag) {
pageFlag = flag
svgDoc = null
if (svgDoc === null) {
clearTimeout(timeSvgDoc)
console.log(111)
timeSvgDoc = setTimeout(MapInit(1), 1000)
} else {
……
}
}
结果：控制台飞速打印111，直达栈溢出
思考：
1、怀疑有多个定时器存在，于是加上clearTimeout(timeSvgDoc)，没用。
2、考虑修改时间间隔，1000改为10000即10s钟，发现没用任何影响，飞速打印111。
3、对比其他正常的定时器，发现写法不对，改为如下即可。
function MapInit (flag) {
pageFlag = flag
svgDoc = null
if (svgDoc === null) {
clearTimeout(timeSvgDoc)
timeSvgDoc = setTimeout(() => {
MapInit(1)
}, 1000)
} else {
……
}
}
原因：
问题在于定时器setTimeout的第一个参数要求是一个函数，比如
setTimeout(MapInit,1000)
但是因为函数带了参数时，第一个参数其实是函数的返回值了，如下：
setTimeout(MapInit(1),1000)
所以马上执行了MapInit函数获取其返回值，而返回值定时1s后执行并没有什么效果。
二十、JS浮点数运算的误差问题
经典问题：
0.1 + 0.2 === 0.3 // false
同样的系统中碰到：
30-19.47=10.530000000000001
问题原因：
因为浮点数运算的时候，先转化为二进制，用二进制来算，结果再转回十进制。
而浮点数19.47转化为二进制是个无限循环小数，只能取近似值，误差就这么产生了。
解决办法：
用toFixed()四舍五入为指定的小数位数即可。