最近用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开发中的几个技巧的更多相关文章

  1. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  2. vue.js2.0+elementui ——> 后台管理系统

    前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...

  3. 浅谈Vue.js2.0某些概念

    Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统.   A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...

  4. 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

  5. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  6. j2ee5.0开发中jstl标签失效

    尝试了下,对于Weblogic中的出现的错误,也是有效的!   j2ee5.0开发中jstl标签失效 原因不详, 解决办法, 一:将.web.xml中 <web-app version=&quo ...

  7. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  8. vue.js2.0 (简易)水果商城 vuex vant-ui

    vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...

  9. OAF开发中一些LOV相关技巧 (转)

    原文地址:OAF开发中一些LOV相关技巧 在OAF开发中,LOV的使用频率是很高的,它由两部分构成一是页面上的LOV输入框(如OAMESSageLovInputBean),二是弹出的LOV模式窗口(O ...

随机推荐

  1. Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)-D- Array Restoration

    我们知道不满足的肯定是两边大中间小的,这样就用RMQ查询两个相同等值的区间内部最小值即可,注意边界条件 #include<bits/stdc++.h> #define x first #d ...

  2. 个人作业Week2-代码复审(修改明确了要求)

    代码复审 零,说在前面的话 大家完成了个人项目之后,都写了很多代码. 这些代码可能: 大括号换行/不换行 使用tab缩进/使用空格缩进 变量名函数名的定义很好/不好 每个函数都有详细的注释解释函数的功 ...

  3. 读《移山之道——VSTS软件开发指南》

    读<移山之道>这本书差不多用了一个星期的时间,感觉还是收获了一些知识的,以前只是会简单地编个小程序(虽然现在也是这样),但看过这本书之后我对软件开发这个概念的认识度有了从一片模糊到了解大体 ...

  4. myeclipse从SVN检出项目报错

    今天是在公司实习的第一天,从SVN服务器检出项目后发现报错. 解决方法: 1. 右键项目,选择属性properties-->选择resource-->将others选中并换为UTF-8 2 ...

  5. MCMC等采样算法

    一.直接采样 直接采样的思想是,通过对均匀分布采样,实现对任意分布的采样.因为均匀分布采样好猜,我们想要的分布采样不好采,那就采取一定的策略通过简单采取求复杂采样. 假设y服从某项分布p(y),其累积 ...

  6. Flask-论坛开发-3-数据库

    对Flask感兴趣的,可以看下这个视频教程:http://study.163.com/course/courseLearn.htm?courseId=1004091002 1. SQLAlchemy ...

  7. bat脚本的写法

    当你每次都要输入相同的命令时,可以把这么多命令存为一个批处理,从此以后,只要运行这个批处理,就相当于打了几行.几十行命令.下面以Nginx服务的停止脚本为例写一个bat批处理文件: 1.新建nginx ...

  8. 归并排序详解(python实现)

    因为上个星期leetcode的一道题(Median of Two Sorted Arrays)所以想仔细了解一下归并排序的实现. 还是先阐述一下排序思路: 首先归并排序使用了二分法,归根到底的思想还是 ...

  9. 【Linux】工作管理

    在进行工作管理的行为中,其实每个工作都是目前bash的子进程,即彼此间是有相关性的.我们无法以job control的方式由tty1的环境去管理tty2的bash 当只有一个终端时,可以出现提示符让你 ...

  10. GitHub && GitLab

    1.github介绍 Git作为一个开源的分布式版本控制系统,已经被越来越多的人使用,随之需要的就是需要有个专门的地方存储.管理通过Git上传的项目,这就是gitHub gitHub是一个面向开源及私 ...