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,然后就可以正常使用了。

时间: 2024-10-10 14:50:17

vue.js2.0开发中的几个技巧的相关文章

Vue CLI 3开发中试用UIkit 3组件库

一.UIkit组件库与vuikit简介 在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库.其中,UIkit组件库是一款基于Less+JS的一款轻量级.模块化.响应式的前端UI组件库.特别是,从版本3.0.0 beta 31开始完全脱离了jQuery框架.UIkit组件库的一个重要特点是,其提供的组件大部分是非常基础性的,但是也有一部分组件相当实用,例如Slideshow组件.Upload组件.Video组件等,在github网站上的评价星数是13K,相当不错.另一个

Vue 2.0开发企业级移动端音乐WebAPP

第1章 课程内容介绍包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解.1-1 导学1-2 课前必读(源码获取方式) 第2章 项目准备工作包括项目需求分析.脚手架初始化代码.项目目录介绍及图标字体.公共样式等资源的准备 .2-1 需求分析2-2 Vue-cli脚手架安装2-3 项目目录介绍及图标字体.公共样式等资源准备 第3章 页面骨架开发包括页面入口.header 组件的编写.路由配置及顶导 tab 组件开发.3-1 页面

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

原文地址:OAF开发中一些LOV相关技巧 在OAF开发中,LOV的使用频率是很高的,它由两部分构成一是页面上的LOV输入框(如OAMESSageLovInputBean),二是弹出的LOV模式窗口(OAListOfValueBean).用户选择LOV的按钮就会弹出LOV窗口,用户在LOV窗口查询并选择了值,可以返回到页面上的LOV输入框.在这里就不赘述如何创建LOV,只说一些平时会碰到的应用: 1.控制LOV的查询结果 2.LOV相关事件 3.动态LOV 4.LOV Choice一,控制LOV的

vue 2.0 开发实践总结之疑难篇

续上一篇文章:http://www.cnblogs.com/beidan/p/6129891.html ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1.  vue 组件的说明和使用 一个组件实质上是一个拥有预定义选项的一个 Vue 实例 在header组件内部允许外部使用,需要导出属性,有2种导出方法 1.  默认导出(不用命名) 1 export default { 2 data () { 3

Vue CLI 3开发中屏蔽烦人的EsLint错误

问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue CLI工具项目的,在我最新使用的Vue CLI 3生成的工程中根本不起作用.无奈之下,认真学习了Vue CLI 3官方文档,终于找到最佳答案. 办法 Vue这个前端框架相对于React和Angular,入门会非常快.但是,到了中后期实战阶段仍然有许多工程实际问题需要我们一块一块地攻克.Vue CLI这

Vue.js2.0从入门到放弃---入门实例

最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希

转-Vue.js2.0从入门到放弃---入门实例(一)

http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 2016-11-03 14:40 21431人阅读 评论(9) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 最 近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊, 由

iOS开发中的那些小技巧

一,前言 看到这个图,你会想起谁?是不是想起了,曾经的用户名输入框,密码输入框... 那么,问题来了:作为iOS开发的你,这个输入框你是怎么实现的,成为关键. 二,方案 方案1:弄一个UIView,在这个视图上分别放三个控件:UIImageView,UILabel与UITextField.(这个方案很直接,如果你只是简单的直接将三个控件放到视图上,那么你的月薪暴露了,最多3K.如果你是对这个视图重写了,将那三个控件封装起来了,放在.h文件,那你的月薪应该是3.5K,如果是将那三个控件放到.m文件

Snail—iOS开发中得一些小技巧

开发中 常常会使父视图的透明度改变,而子视图不受父视图的影响,则下面这段代码可以完美解决.... fatherView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.6]; 版权声明:本文为博主原创文章,未经博主允许不得转载.