vue中的import,vue按需加载组件 import

　　本文主要介绍vue直接实现接口api文件封装，无需导入。有需要的朋友可以借鉴一下，希望能有所帮助。祝你进步很大，早日升职加薪。

引言

　　开发时习惯将调用后端接口的方法写在接口文件中统一管理，所以使用时需要导入方法。

　　在类似的页面中，从导入{fun1，fun2，fun3}./API/用户

　　每次都要导入，很不方便。

解决每次import问题：

　　在图表上打包后

　　当在组件中调用api时，直接调用这个。$api.user.func1().

　　不从导入{fun1，fun2，fun3}./API/用户

封装代码，在index.js

　　从“vue”导入Vue

　　从导入*作为DS。/DS

　　将*作为内容从导入。/内容

　　作为用户从导入*。/用户

　　const api={

　　DS，

　　内容，

　　用户

　　}

　　Vue.prototype.$api=api

　　导出默认api

　　主页. js

　　导入“@/api”

　　对于这个只有一级的接口文件，我们可以按照上面的处理。

多层级怎么处理呢？

　　图中api接口文件夹下有一级login.js，menu.js，monitor文件夹下有二级job.js，server.js。这种可以按以下方式处理~

src / api / index.js

　　从“vue”导入Vue

　　从导入*作为登录名。/登录

　　从导入*作为菜单。/菜单

　　从导入*作为监视器。/监视器/索引

　　console.log(2222222)

　　console.log(监视器)

　　const api={

　　监视器，

　　菜单

　　}

　　Vue.prototype.$api=api

　　//导出默认api

src / api / monitor / index.js

　　从导入*作为作业。/作业

　　从导入*作为服务器。/服务器

　　导出{作业，服务器}

src / main.js

　　导入“@/api”

页面

　　这个。$api.login.func1()。然后(res={..

　　这个。$api.monitor.job.func1()。然后(res={..

　　思想是：

　　同级别的文件直接导入再挂载，多级的文件分文件夹。该文件夹中的所有文件都由index.js导入，然后导出。然后，通过在外层引用内层的索引文件，可以一次性导出所有文件内容。

接口.js文件内容如下

　　这就是vue调用接口api文件封装直接不导入的细节。关于vue调用接口api文件封装的更多信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。