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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Vue.js实现立体计算器
Feb 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
php实现把数组按指定的个数分隔
2014/02/17 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python进阶_浅谈面向对象进阶
2017/08/17 Python
使用python实现BLAST
2018/02/12 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
党员活动日总结
2014/05/05 职场文书
未婚证明书模板
2014/10/08 职场文书
材料员岗位职责范本
2015/04/11 职场文书
迎国庆主题班会
2015/08/17 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技