首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Laravel 5.3中的Vue.js 2.0中的组件中使用外部html模板

如何在Laravel 5.3中的Vue.js 2.0中的组件中使用外部html模板
EN

Stack Overflow用户
提问于 2016-12-13 15:12:03
回答 2查看 6K关注 0票数 4

我使用的是默认的Laravel 5.3设置--这是Vue.js 2.0的默认配置的全新安装。

使用browserify 5.1和Larave1.x,我可以很容易地定义像这样的组件,并使用Laravel进行编译。

代码语言:javascript
复制
Vue.component('test-component', require('./test-component');  

/*  test-component.js */
export default{
    template:require('./test-component.template.html')
}

/* test-component.template.html  */
<div class="test-component">
    <h1> Test Component <h1>
</div>  

然而,在Vue 2中,默认是webpack (虽然browserify也是可用的,但无法使其工作,webpack似乎更好)。但是我不能让配置正常工作。

我尝试了各种配置,最后在我的gulp.js文件中实现了这一点

代码语言:javascript
复制
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); 

var config = {

    module:{
        loaders:[
            {
                test: /\.html$/,
                loader: 'vue-loader'
            }
        ]
    }
};
elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js',null, null, config);
});  

现在,我在编译gulp webpack时没有得到任何错误,但是当我尝试在浏览器中查看页面时,它不显示组件,并且在控制台中出现错误/警告

代码语言:javascript
复制
vue.js?3de6:513[Vue warn]: invalid template option:[object Object] 
(found in component <test>)

vue.js?3de6:4085Uncaught TypeError: Cannot read property 'child' of null(…)  

My app.js main条目文件(默认由Laravel提供)

代码语言:javascript
复制
require('./bootstrap');

Vue.component('test-component', require('./components/test-component'));

const app = new Vue({
    //el: '#app',
}).$mount('#app');  

我遗漏了什么?如有任何建议,我们将不胜感激。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-12-13 16:16:01

  1. 你必须使用html-loader而不是vue-loader

npm install html-loader --save-dev

  • Your gulpfile.js (需要更改loader):

const config ={ module:{ loaders:{ test: /.html$/,loader:'html‘} };elixir((mix) => { mix.sass('app.scss') .webpack('app.js',null,null,config);});

  • Your test-component.js (无需更改,即可使用):

导出默认模板{:require(‘./

  • -test-component-template.html-.template.html’)}测试您的模板:(无需更改,即可使用)

重要

  1. 下面是如何定义您的组件:

测试组件(‘

代码语言:javascript
复制
- Using Default

-Vue.component’,需要(‘./测试组件’).default);

-或者,只需使用ES2015 import

从‘./ TestComponent -component’导入组件;Vue.component('test-component',TestComponent);

票数 3
EN

Stack Overflow用户

发布于 2016-12-13 15:48:15

在您的gulp文件中尝试执行以下操作:

代码语言:javascript
复制
 const elixir = require('laravel-elixir');
 require('laravel-elixir-vue-2');

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

然后像这样导入你的组件:

代码语言:javascript
复制
import Test from './Components/Test.vue';

Vue.component('test', Test);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41115436

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档