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 相关文章推荐
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 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
两种php调用Java对象的方法
2006/10/09 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python对List中的元素排序的方法
2018/04/01 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
财务助理岗位职责
2013/11/10 职场文书
标准自荐信范文
2014/01/29 职场文书
致全体运动员广播稿
2014/02/01 职场文书
期末自我鉴定
2014/02/02 职场文书
教师现实表现材料
2014/02/14 职场文书
法人授权委托书范本
2014/04/04 职场文书
学校师德师风整改方案
2014/10/28 职场文书
党员示范岗材料
2014/12/19 职场文书
小学生通知书评语
2014/12/31 职场文书
2015毕业实习推荐信
2015/03/23 职场文书