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