webpack+vue中安装使用vue-layer弹窗插件

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 ()
    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 )

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

转载于:https://www.cnblogs.com/myIvan/p/9564502.html