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 常用函数库详解
Oct 21 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
node网页分段渲染详解
Sep 05 Javascript
Vue通过input筛选数据
Oct 26 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python标准异常和异常处理详解
2015/02/02 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
简历自荐信
2013/12/02 职场文书
房屋出租协议书
2014/04/10 职场文书
酒店辞职书范文
2015/02/26 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
计算机教师工作总结
2015/08/13 职场文书