无法设置使用laravel 5.4进行vee-validate

时间:2017-04-21 07:19:15

标签: laravel-5 vuejs2

我是vue的新手并尝试将其集成到我正在使用Laravel 5.4的项目中。我正在使用vee-validate进行验证。我正在使用纱线来管理包裹。当我在npm run dev之后访问页面时,我在firebug控制台栏中出现以下错误:

TypeError: value is undefined               (this one is in app.js file)
ReferenceError: require is not defined  (this one is in plugin.js file)

这是我的app.js文件:

/**                                                                             
 * First we will load all of this project's JavaScript dependencies which       
 * includes Vue and other libraries. It is a great starting point when          
 * building robust, powerful web applications using Vue and Laravel.            
 */

require('./bootstrap');                                                         
import VeeValidate from 'vee-validate'                                          

Vue.use(VeeValidate);

/**                                                                             
 * Next, we will create a fresh Vue application instance and attach it to       
 * the page. Then, you may begin adding components to this application          
 * or customize the JavaScript scaffolding to fit your unique needs.            
 */
Vue.component('example', require('./components/Example.vue'));                  
Vue.component('form-account-create', require('./components   /CreateAccount.vue'));

const app = new Vue({                                                           
    el: '#app'                                                                  
}); 

这是我的webpack.mix.js文件:

    mix.js('resources/assets/js/app.js', 'public/js')                               
       .sass('resources/assets/sass/app.scss', 'public/css');                       

    //copying the font-awesome fonts                                                
    mix.copy('./node_modules/font-awesome/fonts', 'public/bulids/fonts');           

    /**                                                                             
     * concatenating multiple plugins css into one file                             
     */                                                                             
    mix.styles([                                                                    
        './node_modules/metismenu/dist/metisMenu.min.css',                      
        './node_modules/gritter/css/jquery.gritter.css',                        
        './resources/assets/css/animate.css',                                   
        './resources/assets/css/style.css',                                     
        './resources/assets/css/custom.css'                                     
], 'public/css/plugins.css');                                                   


/**                                                                             
 * concatenating multiple plugins js into one file                              
 */                                                                             
mix.scripts([                                                                   
        './node_modules/metismenu/dist/metisMenu.js',                           
        './node_modules/slimscroll/lib/slimscroll.js',                          
        './node_modules/gritter/js/jquery.gritter.js',                          
        './resources/assets/js/inspinia/inspinia.js',                           
        './node_modules/pace/pace.js',                                          
        './resources/assets/plugins/jquery-ui/jquery-ui.min.js'                 
    /*        './resources/assets/js/inspinia/custom.js' */                         
    ], 'public/js/plugins.js'); 

我目前陷入困境,并且不知道如何解决这些问题。任何帮助是极大的赞赏。感谢您抽出时间阅读此问题。

1 个答案:

答案 0 :(得分:0)

此存储库有效: https://github.com/kanokpit-skuberg/loverflow

  1. resources / assets / js / app.js 文件中 你应该放import VeeValidate from 'vee-validate';
    window.Vue = require('vue');

  2. webpack.mix.js 文件中 pace.js pace.min.js 文件应手动下载(pace)。
    因为来自npm install pace的pace.js包含客户端不允许的代码require('charm')