试图将仅 Laravel 的项目转换为 Vue + Laravel 项目。 Vue组件未安装

Question

我想将现有的 Laravel 项目转换为 Vue + Laravel 项目。我已经成功创建了一个 Vue 组件作为应用程序中的测试，所以我知道 vue 安装正确。

首先，我在 web.php 文件中创建了一个路由：

Route::view('/homepageVue', 'layouts.homepage');

然后，我创建了 layouts.homepage 刀片文件：

@extends('lib.master.main')

@section('styles')
@stop

@section('scripts')
    <script src="{!! asset('js/homepage/homepage.js') !!}" type="text/javascript"></script>
@stop

@section('title')
    - Homepage
@stop

@section('content')
    <div id="homepage"></div>
@stop

然后，我在assets文件夹中创建了组件，还有homepage.js文件：

assets/js/homepage/homepage.js：

// *****************************
// ***** Private Variables *****
// *****************************
/**
 * Save this instance
 * @type @this;
 * @private
 */
 var self = this;

 /**
  * If Module has been initiated
  * @type Boolean
  * @private
  */
 var _isInit = false; // to avoid 'rebinds'

 /**
  * Categories Component instance
  */
 const homepage = require('./components/homepage');


 // ****************************
 // ***** Public functions *****
 // ****************************
 /**
  * start
  *
  * Starts the module
  * Inits private variables and executes specific logic needed for the module
  * to start.
  *
  * @public
  */
 this.start = function() {
     if(!_isInit) {
         console.log("Homepage starts..");

         homepage.start();
     }
 };

 self.start();

然后，我创建了 assets/js/homepage/component/homepage.js 文件：

// *****************************
// ***** Private Variables *****
// *****************************
/**
 * Save this instance
 * @type @this;
 * @private
 */
 var self = this;

 /**
  * If Module has been initiated
  * @type Boolean
  * @private
  */
 var _isInit = false; // to avoid 'rebinds'

 /**
  * Request
  * @type String
  * @private
  */
 var _request;

 /**
  * Forms Instance
  */
 import Homepage from './Homepage.vue';

 // *****************************
 // ***** Private functions *****
 // *****************************
 /**
  *
  * Forms
  *
  * Create Forms
  *
  */
 var _homepage = function () {
     // Create all requested instances
     new Vue({
         el: '#homepage',
         mixins: [Homepage],
     });
 };

 // ****************************
 // ***** Public functions *****
 // ****************************
 /**
  * start
  *
  * Starts the module
  * Inits private variables and executes specific logic needed for the module
  * to start.
  *
  * @required
  * @param request
  * @type array
  *
  * @public
  */

 self.start = function() {
     if(!_isInit) {
         // Init Forms Component
         _homepage();
     }
 };

这是我要挂载的组件：

<template>
  <div >
      <h1>hi</h1>
  </div>
</template>

<script>
export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

<style>

</style>

然后我添加到 laravel mix 编译后进入 layouts.homepage 刀片的脚本文件：.js('resources/assets/js/homepage/homepage.js', 'public/js/homepage') ;

const mix = require('laravel-mix');

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

运行 npm run production 后，文件 public/js/homepage/homepage.js 被创建。

编辑：

我将在控制台中粘贴导致错误的部分代码：

// ***** Private Variables *****
// *****************************

var self = undefined;

var _isInit = false; 

var _homepage = function _homepage() {
  // Create all requested instances
  new Vue({
    el: '#homepage',
    mixins: [_Homepage_vue__WEBPACK_IMPORTED_MODULE_0__["default"]]
  });
};

上面的代码产生如下错误：

未捕获的类型错误：无法设置未定义的属性“开始” 在 Module../resources/assets/js/homepage/components/homepage.js (homepage.js:12936) 在 webpack_require (homepage.js:20) 在 Object../resources/assets/js/homepage/homepage.js (homepage.js:12974) 在 webpack_require (homepage.js:20) 在 Object.1 (homepage.js:13007) 在 webpack_require (homepage.js:20) 在 homepage.js:84 在 homepage.js:87

如果我在 public/js/homepage/homepage.js 中手动将 var self = undefined; 替换为 var self=this文件组件已安装并且一切都已修复。问题是每次在 npm run watch 之后我都必须进行此更正。我只是不明白为什么会这样。在文件 assets/js/homepage/homepage.js 和 assets/js/homepage/component/homepage.js 中，代码是 var self = this强>。我不明白为什么 var self 在文件 public/js/homepage/homepage.js 中运行生产后变得未定义。

有人知道会发生什么吗？提前致谢

Answer 1

您在 ID 为 homepage 的元素存在之前添加您的 javascript。

Vue 应用默认的index.html 如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" />
    <title>Example App</title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but this app doesn't work properly
        without JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

当脚本被注入时，它们被放在body标签的末尾：

<!-- ... -->
    <div id=app></div>
    <script src=js/chunk-vendors.feedbeef.js></script>
    <script src=js/app.baadf00d.js></script>
  </body>
</html>

您应该尝试最后添加脚本并从那里调试：

@extends('lib.master.main')

@section('styles')
@stop

@section('title')
    - Homepage
@stop

@section('content')
    <div id="homepage"></div>
@stop

@section('scripts')
    <script src="{!! asset('js/homepage/homepage.js') !!}" type="text/javascript"></script>
@stop