vue项目中公共 js 文件的封装export

我们一般的做法是在 src 文件夹下 新建一个 util 文件夹，util 文件夹里面存放一个 utils.js 文件，这个 js 文件中存放公共的函数。下面讲解大概三种用法。
一、对 utils.js 通过 export default 默认导出为对象
utils.js 内容：

//import {Message, MessageBox} from 'element-ui' // elementui 引入(这里根据个人需求决定是否需要导入)
export default {
  //等同于test: function ()...
  test(x){
    console.log(x)
  },
  hello(){
    console.log("Hello World!")
  }
}

在main.js中引入：

//公共js函数
import utils from "@/util/utils"; // @ 默认的是 src 文件夹，后面省略了utils.js 后面的后缀名js
Vue.prototype.$utils = utils;    //直接定义在vue的原型上面

这样在组件中，就可以直接拿来用了，写法为：this.$utils.hello( )

二、对 utils 通过 export 默认导出
utils.js 内容：

function test(x){
  console.log(x)
}
function  hello(){
  console.log("Hello World!")
}
export default{   //注意这里是default
  test,
  hello
}

在组件中就可以通过 import utils from ‘@/util/utils.js’ 引入，用法为： utils.hello( )

三、对 utils.js 通过 export 普通导出
utils.js 内容：

export function test(x){
  console.log(x)
}
export function  hello(){
  console.log("Hello World!")
}

然后在组件中通过 import { test, hello } from ‘@/util/utils.js’ 引入（这里可以根据自己的需求，用到哪些函数，就引入哪些函数），用法为 test( )
四、导出

export const menu1 = [
    { label: '首页', id: 1 }
]
export const menu2 = [
    { label: '用户管理', id: 8 },
    { label: '角色管理', id: 9 }
]
//调用
import { menu1, menu2 } from "@/assets/constants/menus";
//
let nv = [...menu1, ...menu2].find(({ label }) => label == item.name);

五、vue3中使用

const onShowDeleteConfirmMsg = (msg, config = {}) => {
  return ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    ...config
  })
}

export { onShowMessage, onShowMessageBox, onShowDeleteConfirmMsg }

import { onShowMessage } from '@/utils/showMessage'
const addParamFun = async () => {
 const params = { ...state.accessForm }
 try {
 const res = await creatAccess(params)
 if (res.data) {
 state.loading = false
 onShowMessage({
 message: '新增入网设备成功',
 type: 'success'
 })
 ctx.emit('closeDialog', { reload: true })
 }
 state.loading = false
 } catch {
 state.loading = false
 }
 }

<template>
  <div class="tree-box mt-10">
    <el-tree default-expand-all node-key="id" highlight-current :props="{ children: 'children', label: 'name' }" :data="treeDataList" :expand-on-click-node="false" @current-change="currentChange">
      <template #default="{ data }">
        <div class="custom-tree-node">
          <label>{{ data.name }}</label>
          <el-tag v-if="data.labelItemId && data.labelName" :style="getTagStyle(data.labelColor)" size="small">{{ data.labelName }}</el-tag>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { getTagStyle } from '@/utils/helper'

export default {
  name: 'LedgerTree',
  props: {
    treeData: {
      type: Array
    }
  },
  setup(props, ctx) {
    const tabList = [
      { name: 'department', label: '组织部门' },
      { name: 'device', label: '设备类型' },
      { name: 'area', label: '区域位置' }
    ]

    const activeTabName = ref('department')

    const state = reactive({
      //左侧树状数据
      treeDataList: []
    })

    watch(
      () => props.treeData,
      (newVla, oldVal) => {
        state.treeDataList = props.treeData.length > 0 ? props.treeData : []
      },
      {
        immediate: true
      }
    )

    //节点改变
    const currentChange = treeNode => {
      ctx.emit('changeNode', treeNode)
    }

    onMounted(() => {})

    return {
      activeTabName,
      ...toRefs(state),
      tabList,
      getTagStyle,
      currentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-box {
  width: 100%;
  min-width: 280px;
  height: 100%;
}
.el-tree,
.ztree {
  height: 100%;
  overflow-y: auto;
}
.custom-tree-node {
  width: 100%;
  text-align: left;
  &:hover {
    cursor: pointer;
  }
  label:hover {
    cursor: pointer;
  }
}
</style>