Vue中export和export default的区别和用法

Vue是通过webpack实现的模块化，因此可以使用import来引入模块，例如：

import Vue from 'vue'

import Router from 'vue-router'

import util from '@assets/js/util'

以上导入相应的模块，此外，你还可以在 webpack.conf.js 文件中修改相关配置：

resole:{extensions:['.js','.vue','.json'],  // 文件扩展名alias:{  'vue$':'vue/dist/vue.esm.js','@':resolve('src'),}},

上面意思是，你的模块可以省略 ".js"，".vue"，“.json” 后缀，webpack 静态模块打包工具会自动添加上这些后缀名；可以用 "@" 符号代替 "src" 字符串等。

export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

　　export 和export default 的区别在于：export 可以导出多个命名模块，例如：

// Acomponent.js 文件中定义了常量str语法函数add(); 并导出该文件中的str,add()函数,以便其他的js文件使用;
// str,add() 作用域为该文件,其他文件不能使用,根据ES6语法,通过export导出str,add(),以便其他.js文件可以使用改变量;
export const str = 'hello world'export function add(a){return a+1}

如在Bcomponent.js文件中使用str常量,add函数,需要通过import引入Acomponent.js模块；

// 引入Acomponent.js文件或者模块中的常量str,函数add;  注意需要使用大括号{}符；
import { str, add } from 'Acomponent'

export default 只能导出一个默认模块，这个模块可以匿名，例如：

// Acomponent.js导出 包含a,b两个常量的匿名对象;
export default {a: 'hello',b: 'world'}

//Bcomponent.js  在Bcomponent.js文件中引入Acomponent.js文件中功能对象import obj from 'Acomponent'

切记，一个js文件中，只能有一个export default；具体理解为：Acomponent.js文件中只能定义一个export default {} 这样的代码块;
但是，一个js文件中，可以有多个export

实例一(定义各种异常码)：

// 在errorcode.js文件中
// 定义一个对象,匿名导出
export default {'000': '操作太频繁，请勿重复请求','401': '当前操作没有权限','403': '当前操作没有权限','404': '资源不存在','417': '未绑定登录账号，请使用密码登录后绑定','423': '演示环境不能操作，如需了解联系冷冷','426': '用户名不存在或密码错误','428': '验证码错误,请重新输入','429': '请求过频繁','479': '演示环境，没有权限操作','default': '系统未知错误,请反馈给管理员'
}

实例二(定义阿里云图标)：

// iconList.js文件
// 定义阿里云图标集合
export default [{label: '阿里云图标',list: ['iconfont icon-quanxianguanli','iconfont icon-yonghuguanli','iconfont icon-jiaoseguanli','iconfont icon-web-icon-','iconfont icon-xitongguanli','iconfont icon-rizhiguanli','iconfont icon-navicon-zdgl','iconfont icon-weibiaoti46','iconfont icon-miyue','iconfont icon-shouji','iconfont icon-miyue','iconfont icon-denglvlingpai','iconfont icon-luyou','iconfont icon-msnui-supervise','iconfont icon-server','iconfont icon-wendang','iconfont icon-gtsquanjushiwufuwuGTS','iconfont icon-caidanguanli','iconfont icon-guanwang','iconfont icon-guanwangfangwen','iconfont icon-guiji','iconfont icon-fensiguanli','iconfont icon-gongzhonghao','iconfont icon-anniu_weixincaidanlianjie','iconfont icon-weixincaidan','iconfont icon-xiaoxiguanli','iconfont icon-zhexiantu','iconfont icon-canshu','iconfont icon-erji-zuhushouye','iconfont icon-pay6zhifu','iconfont icon-zhifuqudaoguanli','iconfont icon-dingdan','iconfont icon-tuikuan','iconfont icon-webicon14','iconfont icon-shouyintai','iconfont icon-wenjianguanli','iconfont icon-mysql','iconfont icon-shejiyukaifa-','iconfont icon-record','iconfont icon-biaodanbiaoqian']}
]

例子三(定义对象)


/**一个文件只能定义一个export default{},不能定义其他的export default代码块;**/// 定义website.js模块文件,在webpack中一切文件都是模块
export default {title: 'TPLN',logo: 'TPLN',key: 'tpln',   //配置主键,目前用于存储indexTitle: '托普朗宁(背景)基础能力平台',whiteList: ['/login', '/404', '/401', '/lock'], // 配置无权限可以访问的页面whiteTagList: ['/login', '/404', '/401', '/lock' ], // 配置不添加tags页面 （'/advanced-router/mutative-detail/*'——*为通配符）lockPage: '/lock',tokenTime: 6000,infoTitle: '托普朗宁 基础能力平台',statusWhiteList: [428],// 配置首页不可关闭isFirstPage: false,fistPage: {label: '首页',value: '/wel/index',     params: {},query: {},group: [],close: false},// 配置菜单的属性menu: {props: {label: 'label',path: 'path',icon: 'icon',children: 'children'}}
}

严格遵循ES6语法

--------------------------------------------------前端校验工具组件------------------------------------------------------

// validate.js 工具模块
/*** 邮箱* @param {*} s*/
export function isEmail (s) {return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}/*** 手机号码* @param {*} s*/
export function isMobile (s) {return /^1[0-9]{10}$/.test(s)
}/*** 电话号码* @param {*} s*/
export function isPhone (s) {return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}/*** URL地址* @param {*} s*/
export function isURL (s) {return /^http[s]?:\/\/.*/.test(s)
}export function isvalidUsername (str) {const valid_map = ['admin', 'editor']return valid_map.indexOf(str.trim()) >= 0
}/* 合法uri */
export function validateURL (textval) {const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/return urlregex.test(textval)
}/* 小写字母 */
export function validateLowerCase (str) {const reg = /^[a-z]+$/return reg.test(str)
}/* 大写字母 */
export function validateUpperCase (str) {const reg = /^[A-Z]+$/return reg.test(str)
}/* 大小写字母 */
export function validatAlphabets (str) {const reg = /^[A-Za-z]+$/return reg.test(str)
}/* 验证pad还是pc */
export const vaildatePc = function () {const userAgentInfo = navigator.userAgentconst Agents = ['Android', 'iPhone','SymbianOS', 'Windows Phone','iPad', 'iPod']let flag = truefor (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = falsebreak}}return flag
}/*** validate email* @param email* @returns {boolean}*/
export function validateEmail (email) {const re = /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/return re.test(email)
}/*** 判断身份证号码*/
export function cardid (code) {let list = []let result = truelet msg = ''var city = {11: '北京',12: '天津',13: '河北',14: '山西',15: '内蒙古',21: '辽宁',22: '吉林',23: '黑龙江 ',31: '上海',32: '江苏',33: '浙江',34: '安徽',35: '福建',36: '江西',37: '山东',41: '河南',42: '湖北 ',43: '湖南',44: '广东',45: '广西',46: '海南',50: '重庆',51: '四川',52: '贵州',53: '云南',54: '西藏 ',61: '陕西',62: '甘肃',63: '青海',64: '宁夏',65: '新疆',71: '台湾',81: '香港',82: '澳门',91: '国外 '}if (!validatenull(code)) {if (code.length == 18) {if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {msg = '证件号码格式错误'} else if (!city[code.substr(0, 2)]) {msg = '地址编码错误'} else {// 18位身份证需要验证最后一位校验位code = code.split('')// ∑(ai×Wi)(mod 11)// 加权因子var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]// 校验位var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']var sum = 0var ai = 0var wi = 0for (var i = 0; i < 17; i++) {ai = code[i]wi = factor[i]sum += ai * wi}if (parity[sum % 11] != code[17]) {msg = '证件号码校验位错误'} else {result = false}}} else {msg = '证件号码长度不为18位'}} else {msg = '证件号码不能为空'}list.push(result)list.push(msg)return list
}/*** 判断手机号码是否正确*/
export function isvalidatemobile (phone) {let list = []let result = truelet msg = ''var isPhone = /^0\d{2,3}-?\d{7,8}$/// 增加134 减少|1349[0-9]{7}，增加181,增加145，增加17[678]if (!validatenull(phone)) {if (phone.length == 11) {if (isPhone.test(phone)) {msg = '手机号码格式不正确'} else {result = false}} else {msg = '手机号码长度不为11位'}} else {msg = '手机号码不能为空'}list.push(result)list.push(msg)return list
}/*** 判断姓名是否正确*/
export function validatename (name) {var regName = /^[\u4e00-\u9fa5]{2,4}$/if (!regName.test(name)) return falsereturn true
}/*** 判断是否为整数*/
export function validatenum (num, type) {let regName = /[^\d.]/gif (type == 1) {if (!regName.test(num)) return false} else if (type == 2) {regName = /[^\d]/gif (!regName.test(num)) return false}return true
}/*** 判断是否为小数*/
export function validatenumord (num, type) {let regName = /[^\d.]/gif (type == 1) {if (!regName.test(num)) return false} else if (type == 2) {regName = /[^\d.]/gif (!regName.test(num)) return false}return true
}/*** 判断是否为空*/
export function validatenull (val) {if (typeof val === 'boolean') {return false}if (typeof val === 'number') {return false}if (val instanceof Array) {if (val.length == 0) return true} else if (val instanceof Object) {if (JSON.stringify(val) === '{}') return true} else {if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return truereturn false}return false
}

再添一实例：

import {getDetails} from '@/api/acct/acctTradeRecord'
// #slot: true, 该属性设置为true时候,不会显示该字段的表格数据
export const tableOption = {border: true,index: true,indexLabel: '编号',searchIndex: 5, stripe: true,menuAlign: 'center',searchMenuSpan: 6,editTitle: "冲账",editBtn: false,delBtn: false,align: 'center',addBtn: false,column: [{fixed: true,label: 'id',prop: 'id',span: 24,hide: true,editDisplay: false,addDisplay: false}, {width: 150,label: '客户编号',prop: 'cusNo',overHidden: true,search: true,searchSpan: 4, overHidden:true,span: 100,editDisabled: true,addDisplay: false,span: 24}, {width: 150,label: '客户名称',prop: 'cusName',editDisabled: false,addDisplay: true,overHidden:true,span: 24}, {width: 160,label: '订单编号',prop: 'refTransNo',editDisabled: true,editDisplay: false,search: true,searchSpan: 4, overHidden:true,addDisplay: false,span: 24}, {width: 160,label: '交易流水号',prop: 'refTransId',editDisabled: false,addDisplay: true,editDisplay: false,span: 24},{width: 80,label: '状态',editDisplay: false,prop: 'status',overHidden:true,type: 'select',dicData: [{label: '初始化',value: 10}, {label: '记账成功',value: 100}, {label: '已冲账',value: 110}, {label: '记账失败',value: -100}]}, {width: 140,label: '订单交易时间',prop: 'transTime',type: 'datetime',format: 'yyyy-MM-dd HH:mm:ss',valueFormat: 'yyyy-MM-dd HH:mm:ss',editDisabled: true,overHidden:true,editDisplay: false,addDisplay: false,span: 28}, {width: 140,label: '凭证号',editDisplay: false,prop: 'voucherNo',editDisabled: true,addDisplay: false,overHidden:true,search:true,searchSpan:4,span: 24}, {label: '账套编码',overHidden:true,prop: 'osbCode',editDisplay: false,editDisabled: false,addDisplay: false,span: 24}, {width: 170,label: '交易类型',prop: 'trxCode',overHidden:true,dicData: [{ label: '流量豆充值',value: 'V00001'},{label: '流量豆支出',value: 'V00002'},{label: '流量豆退款冻结',value: 'V00003'},{label: '流量豆退款成功',value: 'V00004'},{label: '流量豆退款失败',value: 'V00005'},{label: '复活豆充值',value: 'V00101'},{label: '复活豆支出',value: 'V00102'},{label: '复活豆退款冻结',value: 'V00103'},{label: '复活豆退款成功',value: 'V00104'},{label: '复活豆退款失败',value: 'V00105'},{label: '借贷调账',value: 'C00001'},{label: '会员余额充值',value: '040001'},{label: '会员结算户充值',value: '040002'},{label: '结算户余额支付',value: '010001'},{label: '余额支付',value: '010002'},{label: '其他支付方式支付',value: '010003'},{label: '垫资借款',value: '050001'},{label: '收款通知',value: '020001'},{label: '会员资金清算',value: '020002'},{label: '资金结算',value: '020003'},{label: '垫资还款',value: '050002'},{label: '结算在途资金解冻',value: '020005'},{label: '结算户提现到银行卡',value: '030001'},{label: '结算户提现到余额',value: '030002'},{label: '余额户提现',value: '030003'},{label: '提现成功',value: '030004'},{label: '余额户转结算户',value: '060001'},{label: '余额户转营销户',value: '060002'},{label: '营销户转结算户',value: '060003'},{label: '头寸资金清算',value: '020004'}],editDisabled: false,editDisplay: false,addDisplay: false,span: 24}, {width: 180,label: '备注',prop: 'memo',overHidden: true,editDisabled: false,editDisplay: false,addDisplay: false,span: 24}, {label: '币种',prop: 'currType',editDisabled: false,editDisplay: false,overHidden:true,addDisplay: false,span: 24}, {width: 120,label: '入账金额(元)',prop: 'amount',sortable: true,overHidden:true,slot:true,editDisabled: false,editDisplay: false,addDisplay: false,span: 24}, {width: 120,label: '付方手续费',prop: 'payerFee',slot: true,editDisplay: false,sortable: true,editDisabled: false,addDisplay: false,span: 24}, {width: 120,label: '付方账套编码',prop: 'payerOsbCode',editDisplay: false,editDisabled: false,addDisplay: false,span: 24}, {label: '付方性质',prop: 'payerAcctNature',editDisabled: false,editDisplay: false,addDisplay: false,span: 24},{width: 120,label: '付方载体类型',prop: 'payerAcctCaType',editDisabled: false,sortable: false,editDisplay: false,addDisplay: false,span: 24},{width: 120,label: '付方账户类型',prop: 'payerAcctType',sortable: false,editDisabled: false,editDisplay: false,addDisplay: false,span: 24},{width: 190,label: '付方账户',overHidden: true,prop: 'payerAcctNo',editDisabled: false,editDisplay: false,addDisplay: false,span: 24}, {width: 90,label: '收方手续费',prop: 'payeeFee',span: 24,slot: true,editDisabled: false,editDisplay: false,addDisplay: false},  {width: 120,label: '收方账套编码',prop: 'payeeOsbCode',span: 24,overHidden: true,editDisabled: false,editDisplay: false,addDisplay: false}, {label: '收方性质',prop: 'payeeAcctNature',span: 24,overHidden: true,editDisabled: false,editDisplay: false,addDisplay: false}, {width: 160,label: '冲账凭证号',editDisplay: false,prop: 'catpVoucherNo',span: 24,},{width: 150,label: '冲账时间',prop: 'catpTime',type: 'datetime',overHidden: true,format: 'yyyy-MM-dd HH:mm:ss',valueFormat: 'yyyy-MM-dd HH:mm:ss',editDisabled: true,editDisplay: false,addDisplay: false,span: 24}, {width: 120,label: '收方载体类型',prop: 'payeeAcctCaType',span: 24,editDisabled: false,editDisplay: false,addDisplay: false}, {width: 120,label: '收方账户类型',prop: 'payeeAcctType',span: 24,editDisabled: false,editDisplay: false,addDisplay: false}, {width: 190,label: '收方账户',prop: 'payeeAcctNo',span: 24,overHidden: true,editDisabled: false,editDisplay: false,addDisplay: false  }, {label: '返回码',editDisplay: false,prop: 'retCode',span: 24,}, {width: 160,label: '返回描述',overHidden: true,editDisplay: false,prop: 'retMsg',span: 24,}, {width: 120,label: '创建时间',prop: 'createTime',type: 'datetime',overHidden: true,format: 'yyyy-MM-dd HH:mm:ss',valueFormat: 'yyyy-MM-dd HH:mm:ss',editDisabled: true,editDisplay: false,addDisplay: false,span: 24}]
}

Vue中export和export default的区别和用法相关推荐

面试官：Vue中组件和插件有什么区别？
一.组件是什么回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度 ...
python属性和方法的区别_Python中几种属性访问的区别与用法详解
起步在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个name属性,那便可以使用foo.name对此属性进行访问.一般而言, ...
面试题： Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
vue学习：vue中data和return data的区别
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的: let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ ...
Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
vue中Computed、Methods、Watch区别
一.methods.watch.computed的区别 computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用: methods 方法表示一个具体的操作,主要书 ...
Vue中，views和components的区别
在Vue.js中,views和components都是Vue文件,但是它们有不同的作用和使用方式. Views Views是指应用程序中的页面,在Vue.js中通常使用Vue Router实现路由功能 ...
VUE中数组赋值push与=的区别
最近做项目时(vue2.0)遇到此坑耗费不少时间,分享如下: data中定义初始结构: data:function(){ return { optionsArr: [{name ...
浅析Vue中ref属性与getElementById的区别
在常规html标签中应用 <div id="test" ref="test">test</div> console.log(docume ...

Vue中export和export default的区别和用法

Vue中export和export default的区别和用法相关推荐

最新文章

热门文章