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 & DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
纯JS实现轮播图
Feb 22 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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使用mkdir创建多级目录入门例子
2014/05/10 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
js资料toString 方法
2007/03/13 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
学习vue.js计算属性
2016/12/03 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Django与JS交互的示例代码
2017/08/23 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
中学生打架检讨书
2014/02/10 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
合伙协议书
2014/04/23 职场文书
股指期货心得体会
2014/09/10 职场文书
话题作文之成长
2019/12/09 职场文书
python删除csv文件的行列
2021/04/06 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电