vue问题汇总
1. nmp run dev 自动运行和热更新
config/index.js
autoOpenBrowser:true //自动打开浏览器
dev中 poll选项值为true
build/webpack.dev.conf.js
修改devServer中hot选项值为tru
2. 跨浏览器的高度一致性，解决了浏览器四周空白的小边
npm install --save normalize.css
import 'normalize.css/normalize.css'
3. div高度height:100%不生效
App.vue中
html, body, #app {
height: 100%;
}
template里第一个div的height是100%
4. Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of div id="{{ val }}", use div :id=“val”.
Vue版本不支持插值{{}}的方式赋值，要使用v-bind指令（或简写“:”）来指定属性
v-bind:id="item.id"
:id="item.id"
5. Module not found: Error: Can’t resolve ‘sass-loader’ 不能解析sass-loader
npm install sass-loader@7.3.1 --save-dev
npm install node-sass -D
6. Couldn’t find preset “es2015” relative to directory
npm install babel-preset-es2015 --save-dev
在webpack.base.conf.js中得module内添加
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
7. 浏览器缩小后，导航栏页面错乱
设置所在的div 为绝对定位，并且宽度固定
.sidebar {
height: 100%;
width: 230px;
position: absolute;
background: #D3D1CE;
display: block;
}
8. 对象转换数组，el-table 引入时data存放请求结果数组
let userArr = []
for (let i in res.data.user) {
userArr.push(res.data.user[i])
}
9. el-menu设置路由跳转
跳转添加default-active 后面还要加router
<el-menu default-active="this.$router.path" router>
Index索要添转的位置
<el-menu-item index="/user/getAll">用户</el-menu-item>
10. Error: Avoided redundant navigation to current location: “/addCoins”. 连续点击导航栏菜单时报错
vue-router版本升级后存在得问题，$router.push()方法改为了Promise缺少了回调函数，因此路由处理了错误信息，
解决办法一在index.js重写路由push增加路由回调函数
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
解决办法二：修改了vue-router版本
npm i vue-router@3.0 -S
11. vue 子路由不生效，未显示子路由component引入得组件页面
原因：路由组件是要渲染到<router-view>中的，子路由组件中也要有<router-view>
解决办法：新建一个ElMian.vue页面，只写入<router-view>用来渲染，在路由中使用ElMian.vue，子路由中正常引入所需要跳转得页面。
我这里是父路由在ElMian.vue中<router-view> 子路由中有嵌套引入了自己所要使用的页面，其中ElMian.vue中中只是单纯的写入了一行<router-view>代码，解决办法虽然不是很好，但是问题解决啦。相当于多了一层嵌套，在App.vue和正常功能页面中使用了ElMian.vue。
12. 使用message组件时，每次页面刷新的时候会自动弹出一个没有内容的消息通知框，而页面内并没有使用消息框的组件
前情：在使用时报错TypeError: _this.$message is not a function
解决办法：Message单独引入使用
import { Message } from "element-ui";
Vue.use(Message);
Vue.prototype.$message = Message;
引入后message可以使用了，但是每次刷新出现了没有消息的弹框
解决办法：
将Vue.use(Message)改为Vue.component(Message.name, Message)
13. json转换
JSON.stringify() 将对象转换为 JSON 字符串，
JSON.parse() 将JSON字符串转为一个对象
14. findIndex查找对象中是否存在某个值
data.findIndex(item => {
if (item.name === ‘aaaa’) {
return true
}
})
存在return true并且将不再继续循环运行，返回的结果为键值
