entityMap|blocks|key|1rq3a|text|我认为应该用app的id包装容器div|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2c1c6|<div+id="app"+>+<example-component></example-component>+</div>|code-block|syntax|javascript|2vdb|如果不是，只检查在php文件中是否正确导入了Js文件。|clkc4^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|L|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|M|9|@]|A|@]|B|$]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

<p>I think you should wrap the container div with an id of app</p>

<pre><code>&lt;div id="app" &gt; &lt;example-component&gt;&lt;/example-component&gt; &lt;/div&gt;
</code></pre>

<p>if not just check if the Js files are properly imported in the php file</p>


entityMap|blocks|key|16gah|text|哈哈，这是一个faceplam的问题。我已经从布局文件中删除了@yield('content')。对此我深表歉意，并向坦克求救！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|8ft6m^0|V|H|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@$A|I|B|J|C|D]]|E|@]|F|$]]|$2|G|4|-4|6|7|8|K|9|@]|E|@]|F|$]]]]

<p>Lol, it was an faceplam question. I've removed the <code>@yield('content')</code> from the layout file. Sorry for that and tanks for help!</p>


entityMap|blocks|key|c3hfc|text|如果您正在使用Laravel+Mix，请检查您的webpack.mix.js文件，默认配置必须如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f7tug|+mix.js('resources/assets/js/app.js',+'public/js')
+++.sass('resources/assets/sass/app.scss',+'public/css');|code-block|syntax|javascript|2doje|现在，看看您是否已将JS文件链接到您的刀片模板|eva2f|对于更老的Laravel版本(<=+5.5)，看起来是这样的：|ct70t|<script+src="{{+asset('js/app.js')+}}"></script>|ccggr|像这样新的一次(>+5.5)|di1qo|<script+src="{{+mix('js/app.js')+}}"></script>|43lkd|最后，看看你有没有|5cq48|el:+'#app'|9t3t1|它意味着#-+id，就像在CSS中一样，VueJS将搜索id为app元素。该元素之外的所有内容都将不起作用。|808ha|所以你必须像这样使用它|678a7|<div+id='app'>+
<example-component></example-component>
</div>|18fq2|或者|aliuq|<section+id='app'>+
++++<example-component></example-component>
++++</section>|7dbmr^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|16|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|17|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|18|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|19|9|@]|A|@]|B|$]]|$2|L|4|M|6|E|8|1A|9|@]|A|@]|B|$F|G]]|$2|N|4|O|6|7|8|1B|9|@]|A|@]|B|$]]|$2|P|4|Q|6|E|8|1C|9|@]|A|@]|B|$F|G]]|$2|R|4|S|6|7|8|1D|9|@]|A|@]|B|$]]|$2|T|4|U|6|E|8|1E|9|@]|A|@]|B|$F|G]]|$2|V|4|W|6|7|8|1F|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1G|9|@]|A|@]|B|$]]|$2|Z|4|10|6|E|8|1H|9|@]|A|@]|B|$F|G]]|$2|11|4|12|6|7|8|1I|9|@]|A|@]|B|$]]|$2|13|4|14|6|E|8|1J|9|@]|A|@]|B|$F|G]]|$2|15|4|-4|6|7|8|1K|9|@]|A|@]|B|$]]]]

<p>If you are using Laravel Mix  check your webpack.mix.js file, default config must look like this</p>
<pre><code> mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
</code></pre>
<p>Now, look if you have linked JS file to you blade template</p>
<p>Looks like this for older Laravel versions (&lt;= 5.5):</p>
<pre><code>&lt;script src=&quot;{{ asset('js/app.js') }}&quot;&gt;&lt;/script&gt;
</code></pre>
<p>and like this for new once  (&gt; 5.5)</p>
<pre><code>&lt;script src=&quot;{{ mix('js/app.js') }}&quot;&gt;&lt;/script&gt;
</code></pre>
<p>Finally, see you have</p>
<pre><code>el: '#app'
</code></pre>
<p>it mean  # - id, like in CSS, VueJS will search for element with id app.
Everything outside that element will not work.</p>
<p>so you have to use it like</p>
<pre><code>&lt;div id='app'&gt; 
&lt;example-component&gt;&lt;/example-component&gt;
&lt;/div&gt;
</code></pre>
<p>or</p>
<pre><code>&lt;section id='app'&gt; 
    &lt;example-component&gt;&lt;/example-component&gt;
    &lt;/section&gt;
</code></pre>


entityMap|blocks|key|57cj3|text|检查是否要导入app.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|d8q8d|<script+src="{{+asset('js/app.js')+}}"+defer></script>|code-block|syntax|javascript|70lq9^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>check if you are importing app.js</p>

<pre><code>&lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt;
</code></pre>


entityMap|blocks|key|6oj09|text|我也遇到了这个问题，我的问题也解决了。我不是在导入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bvv70|<script+src="{{+asset('js/app.js')+}}"+defer></script>|code-block|syntax|javascript|2vgkj|检查您是否正在导入js/app.js和#app|offset|length|style|CODE|4s4aj|它应该对你有效。|5ia9s^0|0|0|9|9|J|4|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|R|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|S|9|@$J|T|K|U|L|M]|$J|V|K|W|L|M]]|A|@]|B|$]]|$2|N|4|O|6|7|8|X|9|@]|A|@]|B|$]]|$2|P|4|-4|6|7|8|Y|9|@]|A|@]|B|$]]]]

<p>I also faced this problem and mine is solved. I'm not importing</p>

<pre class="lang-html prettyprint-override"><code>&lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt;
</code></pre>

<p>check that you are importing <code>js/app.js</code> and <code>#app</code> </p>

<p>It should work for you.</p>


<p>I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line</p>

<pre><code>npm install
npm run dev
</code></pre>

<p>This commands runs without any errors. When I import the default VUE componet located under <code>~/ressources/assets/components/ExampleComponent.vue</code> in my template nothing happends.</p>

<pre><code>@section('content')
    &lt;example-component&gt;&lt;/example-component&gt;
@endsection
</code></pre>

<p>Here the app.js</p>

<pre><code>require('./bootstrap');

window.Vue = require('vue');

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

const app = new Vue({
    el: '#app'
});
</code></pre>


Laravel 5 VueJS not working

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我正试着用vuejs在我的新鲜幼体设置中。我在命令行中运行以下命令 npm installnpm run dev 此命令运行时没有任何错误。当我导入位于模板中~/ressources/assets/components/ExampleComponent.vue下的默认VUE组件时，没有任何反应。 @section('...

问Laravel 5 VueJS不工作
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel 5 VueJS不工作EN