1、安装vue-layer插件

npm install vue-layer --save-dev

2、打包入口文件main.js中引入vue、vue-layer、并且将vue-layer添加到vue原型

import Vue from 'vue';
import layer from 'vue-layer'
Vue.prototype.$layer = layer(Vue);

3、然后打包报如下错误

ERROR in ./node_modules/vue-layer/dist/vue-layer.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "transform-runtime" specified in "C:\\Users\\defaultuser0\\Study\\Web\\webpack_vue\\node_modules\\vue-layer\\.babelrc" at 0, attempted to resolve relative to "C:\\Users\\defaultuser0\\Study\\Web\\webpack_vue\\node_modules\\vue-layer"
at C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (<anonymous>)
at Function.normalisePlugins (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-loader\lib\index.js:50:20)
at Object.module.exports (C:\Users\defaultuser0\Study\Web\webpack_vue\node_modules\babel-loader\lib\index.js:173:20)
@ ./src/main.js 19:16-36

4、解决上面错误

npm install babel-plugin-transform-runtime --save-dev
npm install babel-preset-stage-0 --save-dev

5、vue中使用无效,浏览器审查报错

this.$layer.alert('123');

 使用layer报错:
vue.runtime.esm.js:575 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

6、解决上面无法使用问题

webpack.dev.js配置文件中添加:
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
},

7、再次使用,成功

mounted() {
console.log(this.$layer);  //打印这个对象的所有方法
//this.$layer.alert("找不到对象!");
this.$layer.confirm('添加成功!',{
type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
title: '自定义', //弹框的标题
area: 'auto',
offset: 'auto',
icon: -1,
btn: '确定',
time: 0,
shade: true, //是否显示遮罩
tips: [0, {}], //支持上右下左四个方向,通过1-4进行方向设定,可以设定tips: [1, '#c00']
tipsMore: false, //是否允许多个tips
shadeClose: true, //点击遮罩是否关闭
});
},

详细使用参数参考:https://www.npmjs.com/package/vue-layer

webpack+vue中安装使用vue-layer弹窗插件的更多相关文章

  1. JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件

    本博文只是简要对JBPM4进行介绍,如需更详细内容请自行google 链接: JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流 ...

  2. vue 中安装使用sass 报错遇到的问题整理

    不出错的情况下,正常安装: 1.安装包: npm install node-sass --save-dev npm install sass-loader --save-dev (sass-loade ...

  3. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  4. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  5. chrome中安装.crx后缀的离线插件

    在前端开发中常常需要在chrome中安装一些插件辅助开发,比如最常用的Postman.React Developer Tools.Vue.js devtools等等...今天分享一下不需要“FQ”的插 ...

  6. 在vue中安装使用vux

    最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一 ...

  7. vue中封装一个全局的弹窗js

    /** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...

  8. 033——VUE中安装使用vue-devtools调试工具用于监控数据变化

    vue官网:https://cn.vuejs.org/ 下的官方仓库:vue-devtools  安装到火狐或谷歌下都可以,安装成功之后,按F12查看就可以了

  9. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

随机推荐

  1. Spring中的AOP(五)——定义切入点和切入点指示符

    定义切入点 在前文(点击查看)中使用到的AdviceTest类中同一个切点(即* com.abc.service.*.advice*(..)匹配的连接点)却重复定义了多次,这显然不符合软件设计的原则, ...

  2. ICG游戏:尼姆游戏异或解法的证明

    描述: 尼姆博奕(Nimm Game),有n堆石子,每堆石子有若干石子,两个人轮流从某一堆取任意多的物品,规定每次至少取一个,多者不限.取走最后石子的人获胜. 标准解法: 判断: 先计算先手是必胜还是 ...

  3. .NET Reflector v9.0.1.318(包含注册机)

    下载 程序员的基础教程:菜鸟程序员

  4. C#中DateTime的各种操作

    C#时间戳与日期互转 /// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name="timeSta ...

  5. YUI前端优化原则-cookie与图像

    四.图片.Coockie与移动应用篇 除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要.这主要包括:Coockie: 减小Cook ...

  6. 服务器上创建git仓库

    1. 在服务器上 su - git ,切换用户 2. 创建一个目录    mkdir test.git ,请注意带上 .git 扩展 3. 切换进入此目录,git init --bare  ,初始化裸 ...

  7. Mac Sublime Text 浏览器 设置快捷键 让html文件在浏览器打开

    首先,进入命令行界面(这里mac和windows一样) 应用命令下载插件 输入命令二 然后就会发现在工具栏多出一个下拉选项 mac的跟它有些区别就是快捷键 mac快捷键是^+√+ V ++字母V,就会 ...

  8. 让UITableView的Cell都变成静态的

    UITableView给我们提供了一个非常不错的展示列表的工具.内置了复用机制,其中的Cell按照一般的写法就可以实现服用,不用在Cell滚动的时候每次都创建一个新的.实现了非常好的用户体验.但是,有 ...

  9. 解决阿里云OSS跨域问题

    解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...

  10. ZSTU4274 约素 2017-03-22 17:11 66人阅读 评论(0) 收藏

    4274: 约素 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 1807  Solved: 467 Description 判断一个正整数n的约数个数 ...