Question

我正在尝试显示位于 assets / js / components / LoginComponent.vue 中的vue组件

<template>
<h1>hello</h1>
</template>
<script>
export default {
    mounted() {
        console.log('Component mounted.')
    }
}
 </script>

和 app.js 就是这样

require('./bootstrap');

window.Vue = require('vue');
Vue.component('login-component', require('./components/LoginComponent.vue'));

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

试图导入我的vuejs组件的刀片就像这样

<body>
<div id="app">


        <login-component></login-component>


        @yield('content')

</div>
</body>

它显示所有页面，而没有该组件的任何想法如何解决？

Answer 1

这些解决了问题

https://laravel.com/docs/5.6/frontend

https://laravel.com/docs/5.6/mix

安装这些代码，然后ctrl + s将重新编译所有js并找到它

Answer 2

使用npm run watch或npm run dev编译Vue文件。
检查刀片文件上是否具有指向已编译资产的链接：

<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}"> @if (app()->isLocal()) <script src="{{ asset('js/app.js') }}"></script> @else <script src="{{ mix('js/manifest.js') }}"></script> <script src="{{ mix('js/vendor.js') }}"></script> <script src="{{ mix('js/app.js') }}"></script> @endif
请在“网络”标签中检查它们是否正确加载，
还使#app div只包装登录组件

<div id="app"> <login-component></login-component> </div> @yield('content')

Answer 3

在 app.js

中

<WorkflowTemplates xmlns="http://schemas.microsoft.com/sharepoint/soap/workflow/">
    <WorkflowTemplate Name="set item permission" Description="" InstantiationUrl="https://team.nov.com/lao/Operation/Colorado/_layouts/NintexWorkflow/StartWorkflow.aspx?List=91639734-9479-4233-ab62-9a954ce31834&amp;ID=14&amp;TemplateID={a27abacf-0596-4638-9251-12b29ced721b}&amp;Web={e58c31db-d234-470e-994b-93d1e5fdb11a}">
        <WorkflowTemplateIdSet TemplateId="a27abacf-0596-4638-9251-12b29ced721b" BaseId="f851d0cb-82a9-472e-bfd9-eaffe26517e1" />
        <AssociationData>
            <string>&lt;Data&gt;&lt;people_Station_Members /&gt;&lt;var_WS_Error /&gt;&lt;workflowLink /&gt;&lt;var_Station_Member /&gt;&lt;var_WorkflowExistsResult /&gt;&lt;/Data&gt;</string>
        </AssociationData>
        <Metadata>
            <InitiationCategories>
                <string>General;#List</string>
            </InitiationCategories>
        </Metadata>
    </WorkflowTemplate>
    <WorkflowTemplate Name="Request Modification" Description="" InstantiationUrl="https://team.nov.com/lao/Operation/Colorado/_layouts/NintexWorkflow/StartWorkflow.aspx?List=91639734-9479-4233-ab62-9a954ce31834&amp;ID=14&amp;TemplateID={c14e3ac5-1edd-48ab-a361-2b97bf7a4382}&amp;Web={e58c31db-d234-470e-994b-93d1e5fdb11a}">
        <WorkflowTemplateIdSet TemplateId="c14e3ac5-1edd-48ab-a361-2b97bf7a4382" BaseId="1f35c9d9-17a8-44a7-8fcd-016250515554" />
        <AssociationData>
            <string>&lt;Data&gt;&lt;var_DupFileInDraftFolder /&gt;&lt;int_DupCount&gt;0&lt;/int_DupCount&gt;&lt;coll_DupFilesInDraftFolder /&gt;&lt;var_CopyResult /&gt;&lt;/Data&gt;</string>
        </AssociationData>
        <Metadata>
            <InitiationCategories>
                <string>General;#List</string>
            </InitiationCategories>
        </Metadata>
    </WorkflowTemplate>
    <WorkflowTemplate Name="Submit For Approval and Publish" Description="" InstantiationUrl="https://team.nov.com/lao/Operation/Colorado/_layouts/NintexWorkflow/StartWorkflow.aspx?List=91639734-9479-4233-ab62-9a954ce31834&amp;ID=14&amp;TemplateID={9596bd67-8493-4ade-9613-d7c3da507816}&amp;Web={e58c31db-d234-470e-994b-93d1e5fdb11a}">
        <WorkflowTemplateIdSet TemplateId="9596bd67-8493-4ade-9613-d7c3da507816" BaseId="98c707af-b7a4-4e32-8df3-93ed1f9ea7d9" />
        <AssociationData>
            <string>&lt;Data&gt;&lt;Approvers_x005F_x0020_Level_x005F_x0020_1 /&gt;&lt;Approvers_x005F_x0020_Level_x005F_x0020_2 /&gt;&lt;/Data&gt;</string>
        </AssociationData>
        <Metadata>
            <InitiationCategories>
                <string>General;#List</string>
            </InitiationCategories>
        </Metadata>
    </WorkflowTemplate>
</WorkflowTemplates>

，需要安装
Vue.component('login-component', require('./components/LoginComponent.vue').default);

在 app.js 的上半部，需要声明

npm install --save axios vue-axios

希望它能起作用

VueJs组件未在laravel刀片上显示

3 个答案: