vue + ts 关于工具函数的封装及导出

在使用Vue构建项目的时候，通常会封装一些全局方法，这里说下我使用ts构建时封装的方式

以其中一个为例

interface Bs {
  [propName: string]: any
}
const bs: Bs = {}



/**
 * @description: 添加持久缓存
 */
bs.setLocal = (name: string = 'default', value: string = ''): void => {
  window.localStorage.setItem(`${pn}_${ver}_${name}`, value)
}



export default bs

以对象的形式进行抛出

下面是使用

<script lang="ts">
import bs from '../assets/utils/bs'

bs.setLocal('user', this.userInfo.username)
</script>

这里的引入 实际需要做下配置~  如果没做配置的话 应该加上.ts的后缀就好了

为了方便，所有ts的引入都不添加后缀 需要在vue.config.js（3.0的脚手架）中添加如下部分

chainWebpack: config => {

    config.resolve.extensions
      .merge([".ts", ".tsx", ".js", ".json"])
      .end()

  },