文章/答案/技术大牛

发布

社区首页 >问答首页 >VueJS不呈现模板内容

问VueJS不呈现模板内容
EN

Stack Overflow用户

提问于 2021-01-25 19:11:51

回答 1查看 140关注 0票数 0

我最近开始将我的Laravel8项目转换为VueJS，但它似乎不能呈现它的模板内容。我使用了以下命令来包含Vue的基本结构：php artisan ui vue && npm install

app.js：

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

webpack.mix.js：

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

主视图：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body id="app">
    <example-component></example-component>

    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Npm build运行良好，没有错误。但不幸的是，模板内容在前端不可见。我看到的所有东西都是vue标签本身，如下所示：

提前感谢！

javascript

laravel

vue.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-25 19:18:35

根组件不应该安装在body元素中，你必须这样做：

<body >
   <div id="app">
    <example-component></example-component>
  </div>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>

并从window.Vue = require('vue').default;中删除default：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65883611

复制

相似问题

问VueJS不呈现模板内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJS不呈现模板内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJS不呈现模板内容
EN