遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。 问题原因 在webstrom系统设置中有一项配置，是 Use “safe write”(save changes to a temporary file first) 。webstrom是自动保存的，如果勾选Use “safe write”，编辑的文件首先会保存到临时文件中...
如下所示： Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers今天遇到一个问题，将Vuex中数组的值赋给新的数组，新数组push时报上面的错误，代码如下 <code class="language-javascript">this.maPartListTable = this.$store.state.vehicleMa.maPartListTable; </code> this.maPartListTable.push(obj);经询问后得知，应该这么写 this.maPartListTable = this.$store.state.vehicleMa.maPartLi...
webpack 打包后动画未执行， 就是npm run build后在dist中生成的项目中动画未生效 解决： 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图下面看下vue-cli 打包后自定义动画未执行的解决方法 在vue项目中，想实现无缝向上滚动的自定义动画效果 webpack 打包后动画未执行，就是你npm run build生成的dist中动画未生效 @-webkit-keyframes move { 0%{ top:0; } 100% { top:-500px; } } 解决方法：在vue项目中...
长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播； 那么可以这样写代码试试： this.$api.queryImages().then((resp) => {if(resp && resp.data.resultCode == "0"){this.swiperImgs = resp.data.data;this.$nextTick(() => { // 下一个UI帧再初始化swiperthis.initSwiper();});} })是的，关键就在于上面这个初始化swiper的调用了，一般会用v-for循环...
记录一下踩坑 前几天，从同事手上接手了一个Vue的项目。（Ps：刚入职两周，老哥还专门写了一个readMe，感谢）； 问题来了，从gitLab上面把项目上clone下来了，node环境什么的都配置好了， npm install npm run dev无法运行，报错信息如下：> NODE_ENV=development webpack-dev-server --open --inline --hot NODE_ENV 不是内部或外部命令，也不是可运行的程序 或批处理文件。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错，报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到，因为这个问题出现的偶然性太高了，而且有的手机上会出现，有的不会，用模拟器不会出现，用真机又会出现，不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案，这是github上关于这个问题的讨论：Loading chunk {n} f...
最近有个新需求，表单要求增量提交，但是身份证要求无则可提交，有错无法提交，只能新写个校验，但是还不能进组件就监控，后来发现watch有个immediate 选项 watch:{"aaa":{immediate:true,handler:function(){} } 以上这篇vue首次赋值不触发watch的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
如果在prop中传的值为一个没有使用特殊命名规则的变量如:（type），可以顺利传值：<code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: [type], template: <div @click="a">我是按钮{{type}}</div>, methods: { a() { console.log(this.type); } } }); var app = new Vue({ el: #app, data: { type: test } });</code> 而当这个变量为驼峰命名法如：（selectName）...
vue-router 该如何使用 忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ 先上代码，用两种方式实现的效果 使用vue-router router import Tab1 from ./components/tab/TabOne import Tab2 from ./components/tab/TabTwo import Tab3 from ./components/tab/TabThree ...
1.npm安装 npm install babel-polyfill npm install es6-promisepackage.json中会出现"babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1",2.main.js引入 import babel-polyfill import Vue from vue import Es6Promise from es6-promise require(es6-promise).polyfill() Es6Promise.polyfill()3.webpack.base.conf.js module.exports = { entry: { "babel-polyfill":"babel-polyfill", app: ./src/main.js },总结 以上所述是小...
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常，今天放到服务器上跑，结果RD说找不到打包后的静态资源，浏览器控制台错误代码404 问了RD，因为服务器上线方式的调整，不会指定具体项目路径因此，https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css 这个文件找不到，看看我们正常打包好的目录：正确的访问路径是：https://bigdata.yiche.com/deploy/static/css/app.149f360181...
第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。 问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>： <template><div id="app"><keep-alive><router-view></router-view></keep-alive></div> </template>keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了。 解决办法： 使用Vue组件切换过...
今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了； 搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码： 只能慢速拖动的代码： <!DOCTYPE html> <html> <head><title>vue结合原生js实现拖动</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <div class="c...
我使用的是element-ui V2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。select.vue文件 <template><div><div class="row" v-for="RowItem in rows"><div class="col" v-for="colItem in RowItem.configVos"><el-select v-model="formData[colItem.paramCode]" :class="getModel(colItem.paramCode)" @change="onSelectChange(colItem.paramCode,formData[colI...
本文介绍了vue下history模式刷新后404错误解决方法，分享给大家，具体如下： 官方说明文档： https://router.vuejs.org/zh/guide/essentials/history-mode.html 一、 实测 Linux 系统 Apache 配置：更改站点配置文件即可，我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80>#Created by linvic on 2018-05-24Serveradmin 674206994@qq.comServerName blog.xxx.comDocumentRoot /home/www/blog<Directory "/hom...