gpt4 book ai didi

laravel-5.3 - Vue 组件不显示

转载 作者:行者123 更新时间:2023-12-01 22:18:23 26 4
gpt4 key购买 nike

我关注了系列代码管“youtube clone”,我做了所有像 Alex 一样的事情,但 Vue 组件不工作。我不是在本地主机上工作,而是在服务器上工作。如果有任何建议,我将非常高兴。

我的 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>

我的 Blade 文件:

@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
})
])
};

最佳答案

很难调试你的设置,因为我不知道你遵循了什么教程,你是如何捆绑你的代码(webpackbrowserify)或者你是什么构建工具使用(gulpelixir 等),但我认为最重要的是理解 Vue 是如何工作的,然后你就可以更好地理解如何自己解决这个问题。

首先,vue 有两个构建 - 独立构建仅运行时构建。它们之间的区别在于,独立构建 包含模板编译器,而仅运行时构建 不包含。

渲染函数

Vue 编译模板以渲染函数(这只是 javascript 函数),它根本不使用 HTML,所以如果你还没有写渲染函数或者您还没有预编译您的组件(使用.vue 文件和像browserifywebpack) 那么你必须使用standalone build;这包括基本组件本身,因此需要了解的重要事项是:

If you are trying to use a component inside anything other than a .vue file you need to use the standalone build.

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

因此,查看您的代码,您正试图在 .blade.php 文件中使用您的组件,该文件不是单个文件组件,因此您将在您的项目中需要独立构建。

当使用 npm 时,vue 默认导入 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还是browserify .如果您使用的是 webpack,则需要将以下内容添加到您的 webpack 配置中:

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 中,id 为 app:

...
<body>
<div id="app">
...
</div>
</body>
...

更新

根据您的 webpack 配置,您的问题似乎出在这里:

  entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},

这表示您正在 src 文件夹中编译 main.js 并将其作为 build.js 输出到 dist 文件夹

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

  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。我自己不使用 webpack,因此可能需要进行一些调整,但这应该可以让您的项目启动并运行。

关于laravel-5.3 - Vue 组件不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42164107/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com