在vue.js中抽出公共代码的方法示例

前言

当我们在使用vue构建中大型项目时，通常会遇到某些经常用的方法以及属性，比如说搭建一个员工管理系统，请求的url需要一个共同的前缀，或者在某几个view中需要用到时间，这个时间是通过某方法格式化之后的等等，如果每次用到都写共同的代码，那样如果之后有变动的话维护起来会非常麻烦。

所以我们就得想办法抽出公共代码，因为vue是组件化开发，我们就会很自然的与es6的module模块化联系到一起。其实当我们在搭建项目结构时就应该先提前埋下伏笔，有一个util文件夹，里面放的就是我们要写的公共代码，其实很多vue的例子都是类似于这种结构搭建的。

对于固定的配置参数我们可以放到config.js中，就像下面这样。

const config = {
 request_prefix: 'http://localhost:10003',
 base_img: 'http://www.baidu.com',

}

const DingConf = function(data){
 xxxxxxxxx
}

export {config, DingConf}

对于常用的工具函数我们可以放到util.js中，结构跟上面一样。

然后为什么我要用export来导出，而不用export default呢？

因为前者更为灵活，因为对于大中型项目来说，我们的工具函数以及配置参数往往较多，如果我们使用export default导出的话，在组件中引入就会全部引入，但我们的需求是只在相应的页面中按需引入即可，所以在vue文件中，我们就可以这样写

import {config} from 'src/util/config'      // 引入模块
export default {
　　created(){
　　　　this.$http({
　　　　　　url: config.request_prefix + xxxxxxxxxxxxx  // 使用
　　　　})
　　}
}

这样写的优点是增强了可读性并利于维护。如果有同学不太理解es6中的import，export，建议大家去看下阮一峰大神的es6入门教程，在这里我也简单的说下吧，因为vue是模块化，所以就得导出某些东东，然后每个模块只负责不同的业务，所以嘛我们最后就得export一下，因为const是不变的常量，所以在配置项中尽可能用这个，在工具函数中用let声明变量，然后import后面的{ ... }就是引入某个模块的某些属性或方法，from 'xxxx' 这里面是指引入哪个模块。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 在vue.js中抽出公共代码的方法示例

    在vue.js中抽出公共代码的方法示例

    前言 当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦. 所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起.其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其

  • vue.js中实现登录控制的方法示例

    本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • vue.js中$set与数组更新方法

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触

  • vue.js仿hover效果的实现方法示例

    vue.js仿hover效果的实现方法示例

    本文实例讲述了vue.js仿hover效果的实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } ul{ margin:

  • 说说如何在Vue.js中实现数字输入组件的方法

    说说如何在Vue.js中实现数字输入组件的方法

    我们对普通输入框进行扩展,实现一个可快捷输入数字组件. 首先制定规则: 只能输入数字. 设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1. 数字输入组件可设置初始值.最大值与最小值. 接着,规划好 API.一个 Vue.js 组件最重要的 3 个部分就是 props.events 以及 slot,我们需要定义这三个部分的命名以及业务规则.这个组件比较简单,所以我们只用到  props 与 events. 1 基础版 html: <!DOCTYPE html> <html lan

  • vue js中实现图片压缩封装方法

    全局main.js引入: // 引入imgUpload方法 import * as imgUpload from "./utils/imgUpload" //外部使用 Vue.prototype.$imgUpload = imgUpload 新建imgUpload.js: const dataURLtoFile = (dataurl, filename) => { // 将base64转换为file文件 let arr = dataurl.split(',') let mime

  • vue.js中关于点击事件方法的使用(click)

    目录 关于点击事件方法的使用(click) vue点击click事件解析 关于点击事件方法的使用(click) 定义vue.js: <script src="../js/vue.min.js"> </script> 也可以使用网上的: <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 都可以. 定义方法: let vm=new

  • Vue.js组件间的循环引用方法示例

    什么是组件: 众所周知组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展.下面话不多说了,来一起看看本文的正文内容. 引言 写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识. 为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用 本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件

  • C语言代码中调用C++代码的方法示例

    由于历史原因,以及不同开发人员的技术偏好,C语言和C++语言都有一些独有的非常有价值的项目,因而两种语言的互操作,充分利用前人造的轮子是一件非常有价值的事情. C++代码调用C代码很简单,只要分别在包含的C头文件的开头和结尾加上如下的两个块: #ifdef __cplusplus extern "C" { #endif 和 #ifdef __cplusplus } #endif 即可. 然而为了支持类.重载等更加高级的特性,在编译C++代码时,C++符号会被修饰.我们dump Linu

随机推荐