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\
ode_modules\\vue-layer\\.babelrc" at 0, attempted to resolve relative to "C:\\Users\\defaultuser0\\Study\\Web\\webpack_vue\
ode_modules\\vue-layer"
    at C:\Users\defaultuser0\Study\Web\webpack_vue
ode_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
ode_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
    at OptionManager.mergeOptions (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
    at OptionManager.init (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_modules\babel-loader\lib\index.js:50:20)
    at Object.module.exports (C:\Users\defaultuser0\Study\Web\webpack_vue
ode_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