当前位置: 首页 > 编程笔记 >

vue.js项目中实用的小技巧汇总

左康安
2023-03-14
本文向大家介绍vue.js项目中实用的小技巧汇总,包括了vue.js项目中实用的小技巧汇总的使用技巧和注意事项,需要的朋友参考一下

前言

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 版本更新的缘故,在实际操作中,这样是行不通的。

正确的做法是把 config/index.js 文件中 dev 对象的useEslint 属性改为false,官方的注释也说的很清楚

# 关闭部分eslint规则

其实 eslint 代码检查是非常好的,不仅规范个人的js书写,在团队多人协作开发中,更是起到了非常重要的作用。但有时候,这些规则有点过于死板,比如声明一个未使用的变量就会报错 “no-unused-vars”,想要关闭这个规则的话,可以打开 eslintrc.js 文件,将对应的规则改为0,即可关闭

# 修改端口号

大多数项目默认是监听80端口,所以为了同时运行多个项目,可以在 config/index.js 中修改端口号

# 设置文件引用路径别名

有时候项目文件过多,可能经常出现类似 "../../../static/data/xx.json" 这样的引用,写起来很麻烦而且经常容易出错(当然代码编译器能够提示就无所谓了),为了简化路径,我们可以在 build/webpack.base.conf.js 中去配置别名

这里是通过调用 resolve 方法来达到简化路径的目的,比如可以直接用@来取代src,也可以直接写 "api/xx.js",而不用一层一层的去找

# UTC time

在使用VueHighcharts 组件时,默认是使用 UTC time的,所以时间总是显示的有差距,比如此刻的时间是2017年11月23日18:07分,但是UTC time显示的时间却是下图中的10:07

看了文档都知道要把 useUTC 选项改为false,但就是不知从哪下手。其实,在main.js中引入组件的同时,我们就可以做相关的配置修改

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍VC小技巧汇总之5则实用小技巧,包括了VC小技巧汇总之5则实用小技巧的使用技巧和注意事项,需要的朋友参考一下 本文搜集汇总VC的5则小技巧,非常实用,对于VC程序设计有很好的参考借鉴价值,详情如下: 1.如何获取程序所在的路径 也就是获取你这个程序本身所在的路径。 在应用程序类CxxApp的头文件中定义一个变量CString m_exePath;用来放置程序的路径名,在应用程序类Cx

  • 本文向大家介绍VC小技巧汇总之窗口技巧,包括了VC小技巧汇总之窗口技巧的使用技巧和注意事项,需要的朋友参考一下 本文搜集汇总了VC小技巧的窗口技巧,对于VC程序开发的窗口设计而言有一定的借鉴价值,详情如下: 1.让窗口一启动就最大化 把应用程序类(CxxxApp)的 InitInstance() 函数中的 改为 则窗口一启动就最大化显示。 2.如何设置窗口的初始尺寸 在将应用程序类(CxxAPP)

  • 本文向大家介绍VC小技巧汇总之控件技巧,包括了VC小技巧汇总之控件技巧的使用技巧和注意事项,需要的朋友参考一下 本文搜集汇总了VC小技巧的控件技巧,对于进行VC开发来说有一定的借鉴价值,具体如下: 1.如何隐藏和显示控件 用CWnd类的函数BOOL ShowWindow(int nCmdShow)可以隐藏或显示一个控件。 例1: 例2: 2.按钮的使能与禁止 用ClassWizard的Member

  • 本文向大家介绍VC小技巧汇总之对话框技巧,包括了VC小技巧汇总之对话框技巧的使用技巧和注意事项,需要的朋友参考一下 本文搜集汇总了VC中关于对话框常用的一些技巧,对于进行VC开发由于一定的参考借鉴价值。 1.如何修改对话框的背景色: 在对话框的OnPaint()函数中加入下面语句: 2.如何让弹出式对话框具有统一的背景色: 在应用程序类CxxxApp的InitInstance()函数中加入下面的语

  • 本文向大家介绍Android ListView常用小技巧汇总,包括了Android ListView常用小技巧汇总的使用技巧和注意事项,需要的朋友参考一下 ListView在我们Android项目中的地位是有目共睹的,相信几乎每一个App中都有它的身影。 ListView主要是用列表形式来加载数据,在特定情况下需要实现一些特殊功能:如刷新数据,加载数据,实现动画效果等。 作为我们常用的控件,有哪些

  • 本文向大家介绍WinForm中的几个实用技巧汇总,包括了WinForm中的几个实用技巧汇总的使用技巧和注意事项,需要的朋友参考一下 本文汇总了几个WinForm中常见的实用技巧,对于C#程序开发有着很好的参考借鉴价值。具体分析如下: 一、屏蔽窗体右上角关闭按钮 1.重写OnClosing 2.重写WndProc 更多方法可以参考: http://topic.csdn.net/u/20091220/