在vue-cli中引入lodash.js并使用详解

 更新时间:2019年11月13日 09:53:48   作者:king-w  
今天小编就为大家分享一篇在vue-cli中引入lodash.js并使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

lodash

是一个一致性、模块化、高性能的 JavaScript 实用工具库。

在vue官方文档中使用了lodash中的debounce函数对操作频率做限制。其引入的方式是直接引入了js

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

而现在我们使用vue-cli脚手架搭建的项目在这样使用,明显会很不合适。所以我们需要通过npm来安装

$ npm i --save lodash

然后在项目中通过require去引用

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

引用在当前组件即可,如在App.vue中引用

<script>
let lodash = require('lodash')

export default {
 data () {
  return {
   firstName: 'Foo',
   lastName: 'Bar2',
   question: '',
   answer: 'ask me'
  }
 },
methods: {
 getAnswer: lodash.debounce(function () {
  if (this.question.indexOf('?') === -1) {
   this.answer = 'without mark'
   return
  }
  this.answer = 'Thinking...'
  var vm = this
  vm.$http.get('https://yesno.wtf/api').then(function (response) {
   vm.answer = lodash.capitalize(response.data.answer)
  })
   .catch(function (error) {
    vm.answer = 'error' + error
   })
 }, 500)
}

详细的操作和文档可以去看官方的中文文档lodash

以上这篇在vue-cli中引入lodash.js并使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vite build打包后页面不能正常访问的情况

    解决vite build打包后页面不能正常访问的情况

    这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 浅谈 Vue v-model指令的实现原理

    浅谈 Vue v-model指令的实现原理

    vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • mpvue开发音频类小程序踩坑和建议详解

    mpvue开发音频类小程序踩坑和建议详解

    这篇文章主要介绍了mpvue开发音频类小程序踩坑和建议详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 一文详解vue-router中的导航守卫

    一文详解vue-router中的导航守卫

    vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航,在 vue-router 中,导航守卫是一种非常重要的功能,所以本文将详细讲解一下vue-router中的导航守卫,感兴趣的同学跟着小编一起来看看吧
    2023-07-07
  • 关闭Vue计算属性自带的缓存功能方法

    关闭Vue计算属性自带的缓存功能方法

    下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 一文带你了解Vue数组的变异方法

    一文带你了解Vue数组的变异方法

    Vue框架提供了一些便捷的数组变异方法,包括push、pop、shift、unshift、splice、sort和reverse等,Vue的数组变异方法可以自动触发DOM更新,本文就详细带大家了解一下Vue.js数组的变异方法
    2023-06-06
  • window.onresize在vue中只能使用一次,自适应resize报错问题

    window.onresize在vue中只能使用一次,自适应resize报错问题

    这篇文章主要介绍了window.onresize在vue中只能使用一次,自适应resize报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 实现基础组件的自动化全局注册

    vue 实现基础组件的自动化全局注册

    这篇文章主要介绍了vue 实现基础组件的自动化全局注册的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue2+ElementUI利用计算属性实现搜索框功能

    Vue2+ElementUI利用计算属性实现搜索框功能

    这篇文章主要为大家详细介绍了Vue2和ElementUI如何利用计算属性实现搜索框功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2024-11-11
  • Vue3+Element Plus实现自定义弹窗组件的全屏功能

    Vue3+Element Plus实现自定义弹窗组件的全屏功能

    在现代化的前端开发中,弹窗组件是提升用户体验的重要元素,本文将介绍如何使用 Vue 3 和 Element Plus 库来创建一个具有全屏功能的自定义弹窗组件,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-07-07

最新评论