webpack配置ProvidePlugin后,在使用时将不再需要import和require进行引入,直接使用即可。

使用方法:

在webpack.dev.conf.js和webpack.prod.conf.js中添加

 plugins: [
...
new webpack.ProvidePlugin({
'api': 'api'
}),
...
7 ]

使用场景:

将所有接口调用方法放在 src/api/index.js中,在组件中无需import即可调用

相关配置:

在webpack.base.conf.js中添加

  resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'api': resolve('src/api/index.js'),
}
},

在组件中使用:

 ...
mounted() {
api.getData().then(res => {
this.items = res
}).catch(err => {
console.log(err)
})
},
...

webpack内置模块ProvidePlugin的更多相关文章

  1. webpack 插件 ProvidePlugin 的使用方法和 eslint 配置

    ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...

  2. webpack从什么都不懂到入门

    前言 这篇文章是自己在整理webpack相关的东西时候突发奇想,想总结自己所学知识,也希望能够帮助想学习webpack的同学们,都是入门级别的,大佬请出门右转. 本文的webpack基于webpack ...

  3. Video.js + HLS 在production环境下webpack打包后出错的解决方案

    Video.js是一个非常强大的视频播放库,能在微信下完美提供inline小窗口播放模式,但当涉及到hls格式视频播放时就比较麻烦,出现的数种现象都不好解决. 错误现象:  1.  PC Chrome ...

  4. vue-cli中如何引入jquery

    前言 虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery(囧),那么如何在使用vue-cli的时候引入jquery呢? 安装 国内镜像 cnpm 安装 ...

  5. Laravel-mix 中文文档

    镜像地址 : https://segmentfault.com/a/1190000015049847原文地址: Laravel Mix Docs   概览   基本示例 larave-mix 是位于w ...

  6. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. webpack 使用优化指南

    前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos. 为什么要使用Webpack 与react一类模块化开发的框 ...

  9. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

随机推荐

  1. 宜信开源|分布式任务调度平台SIA-TASK的架构设计与运行流程

    一.分布式任务调度的背景 无论是互联网应用或者企业级应用,都充斥着大量的批处理任务.我们常常需要一些任务调度系统来帮助解决问题.随着微服务化架构的逐步演进,单体架构逐渐演变为分布式.微服务架构.在此背 ...

  2. Server.xml配置详解

    <Server port="8005" shutdown="SHUTDOWN"> <!-- 属性说明 port:指定一个端口,这个端口负责监听 ...

  3. Android Eclipse 导入 AS Gradle AAR 库手冊

    序言 这是一篇半技术类文章.众所周知如今Google主推Android Studio开发工具.而Eclipse已经被闲置一阵子了,可是Eclipse项目却还有非常多没有迁移到AS中.而如今一些新的库都 ...

  4. 查看客户端java日志

    通过 Java 控制面板启用 Java 控制台 Windows 8 使用搜索来查找控制面板 按 Windows 徽标键 + W 以打开搜索框来搜索设置,或者将鼠标指针拖动到屏幕的右下角,然后单击搜索图 ...

  5. Qt中的打印操作

    Qt中对打印的支持是有一个独立的printsupport模块来完成的,所以,要想在程序中使用Qt的打印功能,必须先在pro文件中添加下面这句代码: QT += printsupport在这个模块中,提 ...

  6. Android笔记之dp与px之间的转换以及LayoutParams

    dp与px之间的转换公式 px = dp * (dpi / 160) dp = px / (dpi / 160) 其中dpi的获取方式如下 private void getDpi() { Displa ...

  7. windows搭建FTP服务器实战

    第一步:创建用户名密码(ftp使用) 1.1.点击“开始”菜单,选择“控制面板”. 1.2.选择“管理工具”—>“计算机管理” 1.3. 选择“本地用户和组”下的用户,右键选择“新用户” 输入用 ...

  8. UI 自动化测试工具BackstopJS简介(1)

    BackstopJS源码地址 https://github.com/garris/BackstopJS 我写了一个DEMO放到github上面,https://github.com/shenggen1 ...

  9. virtualbox Units specified don't exist. SHSUCDX can't install.

    version infomatin: virtual box: 5.1.12 platform: win10 x64 target OS: win7 x64 问题 在win10系统上,使用virtua ...

  10. sample code java pom.xml

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...