vue.js2.0开发中的几个技巧
最近用Vue.js开发了几个项目,Vue的双向数据绑定和组件化让我耳目一新,减少了很多底层重复的工作,和基于jQuey的前端开发不起来,基于Vue的开发给我一种酣畅淋漓的感觉。
下面给出我基于Vue.js做的几个页面:爆料页面、520贵州、百姓关注抢红包。
当然,在开发的过程中,不可避免的遇到了一些问题和坑,在此记录这些问题,积累经验。
1.测试环境相对路径的问题
Vue.js 2.0可以基于wepack构建,如果需要打包生成最终输出代码,直接在DOS窗口中输入命令:npm run build,就可以了。 但是当我把代码部署到测试环境上后,却发现css、js文件资源找不到,经过查找后发现输出文件夹“/dist”中index.html中引用的css、js文件相对路径不对,然后我在网上查找资源,找到了解决办法,将build文件夹中webpack.base.conf.js文件中第17行代码改成如下图所示即可,意思也比较好理解,就是webpack在打包的时候,公共的相对路径是'../',这样就能正确的找到css和js文件了。
2.本地调试如何解决跨域的问题
web前端开发中不可避免的要遇到跨域的问题,特别是当我们在本地调试页面,而服务端api接口在测试环境上时,解决跨域的问题,要么使用jsonp,要么只能把代码部署到测试环境后才能调试,每改动一次代码,都需要部署到服务器,这无疑效率很低,但是vue.js使用proxyTable很好的解决了这个问题,实际使用时,只需要把config目录下的index.js中第30行代码改成如下:
然后还需要在http请求的url路径前面添加"/api",如下图:
3.生产环境代码不生成map文件
使用webpack构建的Vue工程在执行npm run build时默认会生成.map文件,.map文件只在调试阶段需要使用,生成环境已经不需要这类文件,那么,怎样才能不生成.map文件呢?同样,也是只需要配置webpack,修改config路径下index.js文件, 把productionSourceMap的值改为false即可。
4.开发环境报“vue 不是内部或外部命令”的问题
前段时间在开发一个项目时,开发环境出问题了,一直报"vue不是内部或外部命令",在网上查找解决办法,大部分人都说是环境变量设置错了,但是我按照他们提供的方法改完后,依然还是报错,后来在折腾了1天半后,我决定重新安装vue,然后就可以正常使用了。
vue.js2.0开发中的几个技巧的更多相关文章
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- 浅谈Vue.js2.0某些概念
Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统. A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...
- 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- j2ee5.0开发中jstl标签失效
尝试了下,对于Weblogic中的出现的错误,也是有效的! j2ee5.0开发中jstl标签失效 原因不详, 解决办法, 一:将.web.xml中 <web-app version=&quo ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- vue.js2.0 (简易)水果商城 vuex vant-ui
vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...
- OAF开发中一些LOV相关技巧 (转)
原文地址:OAF开发中一些LOV相关技巧 在OAF开发中,LOV的使用频率是很高的,它由两部分构成一是页面上的LOV输入框(如OAMESSageLovInputBean),二是弹出的LOV模式窗口(O ...
随机推荐
- 对于VS软件的个人评价
因为还是一个菜鸟,对于VS这样的大软件还只能是自己个人的理解,以前用的是VC++,后来因为电脑系统更新,开始接触了VS,个人觉得还是vs2010更好用一些,作为一款windows平台应用程序的集成开发 ...
- M2事后会议报告
设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? Beta阶段的爬虫需要更稳定.更高效.操作更便捷.在定义中爬取对性能和功能的要求高,典型用户和场景 ...
- Hangfire Net Core2
https://hangfire.jonecheung.win/configuration/using-redis.html Hangfire 官方支持 MSSQL 与 Redis(Hangfire. ...
- TimeLine CSS/Javascript 时间线
https://casbootadminserver.herokuapp.com/#/applications/23bd8218/trace
- js面向对象高级编程
面向对象的组成 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- $().click()和$(document).on('click','要选择的元素',function(){})的不同
1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器; 2.$(document).on('click','要选择的元素',function(){ ...
- angular4 组件通讯、生命周期
主要通讯形式 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 父组件通过局部变量获取子组件的引用 父组件使用@ViewChild获取子组件的引用 两个不相关联的组件使用中间人模式交互 终极 ...
- 配置自己的Maven方式并使用Maven 运行项目Idea的maven的项目
(1) 当安装了 maven之后,需要导入项目代码,然后编译执行: 打开Idea ==>然后点击小扳手==>在搜索框中输入maven==>然后找到 Maven home direct ...
- selenium之批量执行测试用例生成HTML结果文件
使用HTMLTestRunner运行测试套件,自动生成html测试报告: import unittest, HTMLTestRunner, sendmail_html import time, os ...
- codeforces439B
Devu, the Dumb Guy CodeForces - 439B Devu is a dumb guy, his learning curve is very slow. You are su ...