vue.js项目中实用的小技巧汇总


Posted in Javascript onNovember 29, 2017

前言

Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

# 在Vue 项目中引入Bootstrap

有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误

1、安装jQuery

npm install jquery

2、安装Bootstrap

npm install bootstrap@3

以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install

安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 “Bootstrap's JavaScript requires jQuery npm”,为了解决这个问题,可以在 main.js 入口文件中这样引入:

import $ from 'jquery'
window.jQuery = $
require('bootstrap')

接下来,为了能够使用 Bootstrap的样式,可以在入口文件中引入 bootstrap.css。这个跟引入 Element UI 的方法一样

import 'bootstrap/dist/css/bootstrap.min.css'

# 关闭 eslint 代码检查

很多人说关闭eslint检查的方式是注释掉 build/webpack.base.conf.js 文件中关于eslint配置的这一部分。不知道是否因为Vue-cli 版本更新的缘故,在实际操作中,这样是行不通的。

vue.js项目中实用的小技巧汇总

正确的做法是把 config/index.js 文件中 dev 对象的useEslint 属性改为false,官方的注释也说的很清楚

vue.js项目中实用的小技巧汇总

# 关闭部分eslint规则

其实 eslint 代码检查是非常好的,不仅规范个人的js书写,在团队多人协作开发中,更是起到了非常重要的作用。但有时候,这些规则有点过于死板,比如声明一个未使用的变量就会报错 “no-unused-vars”,想要关闭这个规则的话,可以打开 eslintrc.js 文件,将对应的规则改为0,即可关闭

vue.js项目中实用的小技巧汇总

# 修改端口号

大多数项目默认是监听80端口,所以为了同时运行多个项目,可以在 config/index.js 中修改端口号

vue.js项目中实用的小技巧汇总

# 设置文件引用路径别名

有时候项目文件过多,可能经常出现类似 "../../../static/data/xx.json" 这样的引用,写起来很麻烦而且经常容易出错(当然代码编译器能够提示就无所谓了),为了简化路径,我们可以在 build/webpack.base.conf.js 中去配置别名

vue.js项目中实用的小技巧汇总

这里是通过调用 resolve 方法来达到简化路径的目的,比如可以直接用@来取代src,也可以直接写 "api/xx.js",而不用一层一层的去找

# UTC time

在使用VueHighcharts 组件时,默认是使用 UTC time的,所以时间总是显示的有差距,比如此刻的时间是2017年11月23日18:07分,但是UTC time显示的时间却是下图中的10:07

vue.js项目中实用的小技巧汇总

看了文档都知道要把 useUTC 选项改为false,但就是不知从哪下手。其实,在main.js中引入组件的同时,我们就可以做相关的配置修改

vue.js项目中实用的小技巧汇总

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
javascript的函数作用域
Nov 12 Javascript
js预加载图片方法汇总
Jun 15 Javascript
微信JSSDK上传图片
Aug 23 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
关于 angularJS的一些用法
Nov 29 #Javascript
ReactNative之FlatList的具体使用方法
Nov 29 #Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 #Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
angularjs实现时间轴效果的示例代码
Nov 29 #Javascript
bootstrap响应式工具使用详解
Nov 29 #Javascript
You might like
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
详解python持久化文件读写
2019/04/06 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Django更新models数据库结构步骤
2020/04/01 Python
python能在浏览器能运行吗
2020/06/17 Python
python 装饰器的基本使用
2021/01/13 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
建设工地安全标语
2014/06/07 职场文书
关于读书的活动方案
2014/08/14 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android