Vue开发技巧--------批量引入文件

Posted 2023-04-12

参考技术A 在平时开发中，大家肯定遇到一些你不想做但是又必须做的事，比如路由配置文件、ajax请求封装使用等。
比如在开发中，随着模块增多，每增加一个模块你就需要去router的配置文件下对路由进行配置
如下router配置文件

还有对异步请求的封装也是一个道理，对于我个人而言，我喜欢把异步请求统一引入再统一向外暴露使用，随着模块的增多，也会是没新增一个模块我就要去配置的地方引入一遍暴露一遍。

那么我们有什么好办法呢？

有的有的，我们可以用一种规则来统一引入某些文件，然后动态生成我们想要的配置文件，这样后面再增加模块的时候就不需要我们自己动手了，然后根据自己定的规则在进行使用就完事了！

批量自动化注册全局组件(Vue3)

参考技术A 已知 注册全局组件 有两种方法：

一种是直接去 main.js 中引入文件，通过 vue.component('组件名'，组件对象)，导入定义的变量名就是组件对象，组件名是组件的name

第二种是将要全局注册的全部组件文件导入到同一个index.js文件中，通过 install 函数进行分别注册，之后将这个 index.js文 件导入到 main.js 文件中，通过 vue.use 挂载到全局,之后如果又有新的全局组件需要注册，直接引入到 index.js 文件中即可

①使用 require 提供的函数 context 加载 某一个目录下 的所有 .vue 后缀 的文件。

②然后 context 函数会返回一个导入函数 importFn，它又一个属性 keys() 获取所有的文件路径

③通过 遍历 文件路径数组 ， 使用 importFn 根据路径导入组件对象

批量自动化注册组件：app是vue3中install函数的参数,以下内容就是写在install函数中

需要注意的是，这里注册完成一样是需要将文件导入到main.js文件中，通过Vue.use进行全局挂载

原理就是：当你在mian.js导入，使用Vue.use() (vue3.0 app)的时候就会执行install函数