1
私はLaravel 5.2とVue 2.0.6を使用しています。ローカルコンポーネントを使用する場合、正常に動作します。しかし、私は別の.vueファイルからグローバルなコンポーネントを使用しようとすると、それは次のエラーを示しています。Test.vueVue 2コンポーネントのマウントに失敗しました
[Vue warn]: Failed to mount component: template or render function not defined. (found in component <test> at path\to\site\resources\assets\blog\components\test.vue)
を
<template>
<div>
<h1 class="hello">Hello</h1>
</div>
</template>
<style>
.hello {
color:blue;
}
</style>
<script>
export default {}
</script>
App.js
var Vue = require('vue');
var resource = require('vue-resource');
window.Vue = Vue;
Vue.use(resource);
Vue.component('test', require('../components/test.vue'));
new Vue({
el: '#app'
});
Gulpfile.js
var gulp = require('gulp');
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-webpack-official');
var blogResourcePath = './resources/assets/blog';
var blogPublicPath = 'public/blog-assets';
elixir(function(mix) {
mix.webpack('app.js', blogPublicPath + '/js', blogResourcePath + '/js')
});
Webpack.config.js
'use strict';
const path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'resources/assets'),
exclude: /node_modules/,
loader: 'babel',
},
{
test: /\.vue$/,
loader: 'vue',
},
{
test: /\.css$/,
loader: 'style!css'
},
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js',
}
}
};
Index.htmlと
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<test></test>
</div>
<script type="text/javascript" src="{{ elixir('blog-assets/js/app.js')}} ">
</html>
コンパイル・エラーはありません。同様の質問はhereでも問題は解決しません。
それはあなたにはありません、一部を書き換える私成分としてそれを登録したが –
RDelorier
としてそれを使用することができるので、それを投稿する名前。それを更新する。 – Sovon
私はそれを見逃しているか、あなたのマウントポイントはindex.htmlにはありません（#app） – RDelorier