Vue组件未显示

时间：2017-02-10 16:24:35

标签： laravel-5.3 vuejs2 vue-component

我关注了系列codetube＆＃34; youtube clone＆＃34;我做了像Alex这样的东西，但是Vue组件不起作用。我不是在localhost上工作，而是在服务器上工作。我会很高兴任何建议。

我的app.js 

require('./bootstrap');



Vue.component('videoup', require('./components/VideoUpload.vue'));


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

我的VideoUpload.vue文件：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload</div>

                    <div class="panel-body">
                    ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

我的刀片文件：

@extends('layouts.app')

@section('content')
    <videoup></videoup> 

@endsection

我的app.blade文件：

<!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">


    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
<!--    <link href="/css/app.css" rel="stylesheet">-->

    <link rel="stylesheet" href="/css/app.css">


    <!-- Scripts -->
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
</head>
<body>
    <div id="app">

        @include('layouts.partials._navigation')

        @yield('content')



    </div>



    <script src="/js/app.js"></script>
</body>
</html>

我的gulfpile.js：

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

require('laravel-elixir-vue-2');

require('laravel-elixir-webpack-official');





elixir((mix) => {
    mix.sass('app.scss')
            .webpack('app.js');
});

我的webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
};

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map',
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
};

2 个答案:

答案 0 :(得分：3)

很难调试您的设置，因为我不知道您遵循了哪些教程，如何捆绑代码（webpack或browserify）或您正在使用的构建工具（{{1} }，gulp等），但我认为最重要的是要了解elixir的工作原理，然后你就能更好地理解如何自己解决这个问题。

首先，vue有两个版本 - Vue和standalone build。它们之间的区别在于runtime-only build包含模板编译器而standalone build没有。

渲染函数

runtime-only build编译模板以使函数工作（这只是javascript函数），它根本不使用Vue，所以如果你还没有编写渲染函数或者你没有'HTML您的组件（使用pre-compiled个文件以及.vue或browserify等捆绑商），您必须使用webpack;这包括基本组件本身，所以重要的是要知道：

  

如果您尝试在standalone build文件以外的任何内容中使用组件，则需要使用独立版本。

因为您需要编译器将.vue转换为渲染函数。

因此，查看代码时，您试图在HTML文件中使用您的组件，而不是.blade.php，因此您需要在项目中使用独立版本。

使用single file component时，vue默认导入npm版本：

runtime-only

但您需要确保使用// ES6 import `Vue` from `vue` // this imports the runtime-only build // ES5 var Vue = require('vue'); // this requires the runtime-only build ，以及如何执行此操作取决于您使用standalone build还是webpack。如果您使用的是webpack，则需要将以下内容添加到webpack配置中：

browserify

如果您使用resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } } ，则需要将以下内容添加到browserify：

package.json

并确保"browser": { "vue": "vue/dist/vue.common" }, 将resources/assets/views/layouts/app.blade.php中的所有内容包装为div：

app

更新

根据您的... <body> <div id="app"> ... </div> </body> ... ，您的问题就在这里：

webpack config

这表示您正在 entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, 文件夹中编译main.js并将其作为src输出到dist文件夹。

Laravel使用不同的结构，因此您需要将其更改为：

build.js

现在说，编译 entry: './resources/assets/js/app.js', output: { path: path.resolve(__dirname, './public/js'), publicPath: '/public/', filename: 'app.js' }, 并将文件输出到resources/assets/js/app.js。我自己不使用public/js/app.js因此可能需要稍微调整一下，但这应该可以使您的项目正常运行。

答案 1 :(得分：0)

我有同样的问题。以下为我解决了这个问题。

我更改了：

require('./components/mycomponent.vue')

收件人：

import MyComponent from "./components/mycomponent.vue";
相关问题
最新问题