webpack内置模块ProvidePlugin
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的更多相关文章
- webpack 插件 ProvidePlugin 的使用方法和 eslint 配置
ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...
- webpack从什么都不懂到入门
前言 这篇文章是自己在整理webpack相关的东西时候突发奇想,想总结自己所学知识,也希望能够帮助想学习webpack的同学们,都是入门级别的,大佬请出门右转. 本文的webpack基于webpack ...
- Video.js + HLS 在production环境下webpack打包后出错的解决方案
Video.js是一个非常强大的视频播放库,能在微信下完美提供inline小窗口播放模式,但当涉及到hls格式视频播放时就比较麻烦,出现的数种现象都不好解决. 错误现象: 1. PC Chrome ...
- vue-cli中如何引入jquery
前言 虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery(囧),那么如何在使用vue-cli的时候引入jquery呢? 安装 国内镜像 cnpm 安装 ...
- Laravel-mix 中文文档
镜像地址 : https://segmentfault.com/a/1190000015049847原文地址: Laravel Mix Docs 概览 基本示例 larave-mix 是位于w ...
- Webpack4 学习笔记四 暴露全局变量、externals
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- webpack 使用优化指南
前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos. 为什么要使用Webpack 与react一类模块化开发的框 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
随机推荐
- 解决怎样监听Activity切换
本篇博文在我之前的博文中已经提到了,可是监听Activity切换又能够作为一个单独的内容来叙述,因此这里又单独拿了出来进行赘述. Activity的切换无非有两种.第一种:启动或者创建一个新的Acti ...
- C语言的面向对象设计之 X264,FFMPEG 架构探讨
FFMPEG架构分析 使用面向对象的办法来设想这样一个编解码库,首先让人想到的是构造各种编解码器的类,然后对于它们的抽象基类确定运行数据流的规则,根据算法转换输入输出对象. 在实际的代码,将这些编解码 ...
- 【BZOJ2216】[Poi2011]Lightning Conductor 决策单调性
[BZOJ2216][Poi2011]Lightning Conductor Description 已知一个长度为n的序列a1,a2,...,an.对于每个1<=i<=n,找到最小的非负 ...
- spring+mybatis多数据源,动态切换
有时我们项目中需要配置多个数据源,不同的业务使用的数据库不同 实现思路:配置多个dataSource ,再配置多个sqlSessionFactory,和dataSource一一对应.重写SqlSess ...
- 九度OJ 1110:小白鼠排队 (排序)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1734 解决:1054 题目描述: N只小白鼠(1 <= N <= 100),每只鼠头上戴着一顶有颜色的帽子.现在称出每只白鼠的 ...
- ElasticSearch(二)核心概念
elasticsearch核心概念 (1)Near Realtime(NRT):近实时,两个意思,从写入数据到数据可以被搜索到有一个小延迟(大概1秒):基于es执行搜索和分析可以达到秒级 (2)Clu ...
- BAPI_PO_CREATE1 创建PO ch_memory_complete = ‘x',导致hold on 解决方案,
1.尝试注释标准逻辑,看会不会有什么问题, ZME_BAPI_PO_CUST IF_EX_ME_BAPI_PO_CREATE_02~INBOUND 里面有个控制很费解 我给注释了 2.改用 BAPI_ ...
- Safair浏览器 时间戳转化兼容性问题。
chrome 等浏览器支持 yyyy-MM-dd hh:mm:ss 格式,使用 Date.parse()进行转化 safair 浏览器不知道这种格式,需要将格式设置为 yyyy/MM/dd hh:mm ...
- socket 学习笔记
#include <sys/socket.h> ---------------------------------------------------------------------- ...
- java中的break与continue
1.两者的作用 break:是跳出当前的循环块或者程序块.循环块有for.do while.while,程序块有switch(){case 1: xxx;break;}在循环体中的作用是跳出正在循环的 ...