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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
关于 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
PHP易混淆知识整理笔记
2015/09/24 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python数据结构之图的应用示例
2018/05/11 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
演讲稿开场白
2014/01/13 职场文书
房产转让协议书
2014/04/11 职场文书
英语故事演讲稿
2014/04/29 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
Android存储中最基本的文件存储方式
2022/04/30 Java/Android