gpt4 book ai didi

javascript - laravel 5.5 和 vue js 无法开箱即用

转载 作者:行者123 更新时间:2023-12-01 03:05:20 24 4
gpt4 key购买 nike

我已经编译了 Assets 并运行

npm install 然后 npm run watch

使用内置的示例 Vue 文件,我将welcome.blade 更改为

<body>
<div id="app">
<Example></Example>
</div>

<script href="{{URL::asset('js/app.js')}}" charset="utf-8"></script>
</body>
</html>

并且还安装了 Vue 开发工具,但根本看不到任何内容

示例.vue

<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>

<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>

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

app.js

/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/

require('./bootstrap');

window.Vue = require('vue');

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

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

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

What I get on page load

最佳答案

您只需添加 <script src="{{ mix('js/app.js') }}"></script>之前</body>标签。

通过这种方式添加包含 Vue 库、组件等的组合。

希望这会有所帮助。

关于javascript - laravel 5.5 和 vue js 无法开箱即用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46234168/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com