在使用vuejs遍历数组的时候，使用in语句形式，会有一个警告的提示：警告很明显说是少了v-bind:key,所以添加一个就ok了,看如下文件： /* eslint-disable */ <template><div class="hello" style="background: fuchsia"><ul><li v-for="(value,key,index) in object" v-bind:key="key">//这里就可以去掉警告{{ value }},{{key}},{{index}}</li></ul></div></template> 以上这篇解决vuejs 使用value in list 循环遍历数组出现警告的问...
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。 首先定义一个全局样式： .noscroll{position: fixed;left: 0;top: 0;width: 100%; } 创建一个dom.js文件，定义几个方法： export function hasClass(el, className) {let reg = new RegExp((^|\\s) + className + (\\s|$))return reg.test(el.className) }export function a...
vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白解决办法： config/index.js文件的build->assetsPublicPath的默认值改为 ./ assetsPublicPath：资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用./2.另一个就是单纯的在背景图使用相对路径导致加载不到图片 例如登录页...
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码上，开始这次的vue尝试吧。 【遇到的问题】 在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。 【要实现的目标】 1. 滑动蒙层空白处不让滑动事件穿透。 2. 当蒙层消息框文字多时，要让文字可上下滑动...
如下所示： /** * axios配置,输出为vue组建 * */ import axios from 'axios'; import qs from 'qs' import CookiesJS from 'js-cookie' import router from '../router'// http request 拦截器 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };// 在post请求发送出去之前，对其进行编码 if (config.method === 'post') { config.data = qs.stringify(conf...
问题由来最近在做项目的时候遇到使用循环组件，因为模式一样，只有数据不一样。按照普通组件调用格式来做的时候总是报错，错误信息为[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决方案查询了网上各种资料之后，发现是循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件...
脚手架vue-cli 搭建的项目，build后放于服务器上，发现其他资源全部变成静态加载成功，但路由视图为空，最初以为是webpack打包的问题，找了好久发现是路由配置问题。 解决办法如下： Vue.use(VueRouter) const router = new VueRouter({mode: history, base: /system/, //添加根目录scrollBehavior: () => ({ y: 0 }),routes })比如我是将打包后的dist和index.html放在tomcat上的system下，router 的根目录就是system。 方法很简...
问题： Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// wont work.解释： npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后，会生成dist目录，里边包含index.html和static文件夹。 npm run build的时候, 一开始就会提示Built files are meant to be served over an HTTP server. Opening index.html ...
所遇问题 启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process.env.HOST || config.dev.host。于是这里我们去查看config.dev.host。在我们的config目录下有一个index.js, 找到dev对象的host属性发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访...
webpack的热更新可以说极大地提高了前端的开发效率，以下就是本人遇到的针对vuecli热更新失效的解决方法： 1、检查控制台，编译的时候是否有警告，警告很可能导致热更新的失效 2、vueCli3.0及以上的版本，注意不要用cnpm安装依赖包，要用npm 以上这篇解决vuecli3.0热更新失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。 问题原因 在webstrom系统设置中有一项配置，是 Use “safe write”(save changes to a temporary file first) 。webstrom是自动保存的，如果勾选Use “safe write”，编辑的文件首先会保存到临时文件中...
在解决问题之前，我们先来了解下 vue响应性原理： Vue最显著的一个功能是响应系统-- 模型只是一个普通对象，修改对象则会更新视图。受到javascript的限制，Vue不能检测到对象属性的添加或删除，因为vue在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上：如下代码: Vue.set(obj, _isHover, true);或者可以使用vm.$s...
在项目中使用<keep-alive>包含<router-view>实现页面缓存，加速页面加载， 同时，这种方式带来一些弊端，请看如下大神解释： *********************************** 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。 当再次进入（前进或者后退）时，只触发activated。 *********************************** 这就带来一个问题，之前在项目中使用mounted在页面加载时获...
新手刚开始使用vue时，常会遇见一个坑，那就是热替换失效。 什么？你跟我说使用官方的vue-cli去构建，我就是使用vue-cli后突然失效。 什么？你跟我说重新npm run dev一下，好嘛，已经run了N次了依然没回到大路上。 经过在网上一番查找，发现基本没有这个问题的详解，可能是这个问题太低级了？ 讲解一下热替换的原理：热替换是在执行npm run dev后，会启动一个本地服务器（webpack-dev-server），这个服务器会观察源代码编译出来的文...
下班过目遇到一个错误[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.根据错误提示说明，和搜索之后得出结论：是项目引入的vue编译版本不对 解决方案1 build/webpack.base.conf.js 并设置vue的alias别名，如下： resolve: {alias: {vue: vue/dist/vue.esm.js}} 解决方案2 ...