[英]Laravel and Vue: where to put js/app.js?
I created a simple app using some Vue components and a Bootstrap component (carousel). 我使用一些Vue组件和一个Bootstrap组件(轮播)创建了一个简单的应用程序。
I compile my assets using Laravel Mix. 我使用Laravel Mix编译我的资产。 When I put the compiled app.js between the head tags, my Vue components do not work (
Cannot find element: #app
). 当我将已编译的app.js放在head标签之间时,我的Vue组件不起作用(
Cannot find element: #app
)。 When I put the app.js just before the </body>
tag, my carousel (the indicators ) does not work ... I also tried with the defer
attribute, but no success. 当我把app.js放在
</body>
标签之前时,我的轮播( 指示符 )不起作用...我也尝试使用defer
属性,但没有成功。 Do I have to split my JavaScript-files to make both work? 我是否必须拆分我的JavaScript文件才能使它们都工作?
Edit: 编辑:
When I put my asset just before the </body>
tag, the indicators of the carousel looks like this: <="" li="">
当我将资产放在
</body>
标记之前时,轮播的指示符如下所示: <="" li="">
In general, before the ending </body>
tag. 通常,在结束
</body>
标记之前。
<script type="text/javascript" src="/js/app.js"></script>
And if you have other bootstrap specific js codes, you have to write them after the above-mentioned script tag because app.js
is also responsible for loading bootstrap required js files in the resources/assets/js/bootstrap.js
file. 如果你有其他bootstrap特定的js代码,你必须在上面提到的脚本标记之后编写它们,因为
app.js
还负责在resources/assets/js/bootstrap.js
文件中加载bootstrap所需的js文件。
The message Cannot find element: #app
does not mean, that vue do not work. 消息
Cannot find element: #app
并不意味着,该vue不起作用。 It means, that Vue.js is mounted correctly but it can not find any div with the id of app
: 这意味着,Vue.js已正确安装,但它找不到任何ID为
app
div:
<div id="app"></div>
To include an js file I would recommend the asset()
helper: 要包含js文件,我建议使用
asset()
帮助器:
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.