Pet*_*ter 2 vue-component laravel-5.3 vuejs2
我遵循了系列代码管“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>
我的刀片文件：
@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
})
])
};
这是很难调试你的配置，因为我不知道什么教程中，你跟着，你是如何捆绑你的代码（webpack或browserify），或者你正在使用（什么构建工具gulp，elixir等等），但我认为最重要的是要了解Vue作品，然后您将能够更好地了解如何自己解决这个问题。
首先，vue 有两个构建版本 - astandalone build和 a runtime-only build。它们之间的区别在于standalone build包含模板编译器和runtime-only build不包含模板编译器。
Vue将模板编译为渲染函数以使其工作（这只是 javascript 函数），它根本不使用HTML，因此，如果您尚未编写渲染函数或没有pre-compiled组件（使用.vue文件和诸如browserify或 之类的捆绑程序webpack）那么你必须使用standalone build; 这包括基础组件本身，所以重要的是要知道：
如果您尝试在
.vue文件以外的任何内容中使用组件，则需要使用独立构建。
因为您需要编译器将其HTML转换为渲染函数。
因此，查看您的代码，您正在尝试在.blade.php文件中使用您的组件，这不是一个文件，single file component因此您需要在项目中进行独立构建。
使用时npm，vueruntime-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"
},
还要确保用 idresources/assets/views/layouts/app.blade.php将所有内容包装在 a 中：divapp
...
<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文件夹中build.js。
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自己，因此可能需要进行一些调整，但这应该可以启动并运行您的项目。
| 归档时间： |
|
| 查看次数： |
6204 次 |
| 最近记录： |