0
[Laravel/VueJS] Hỏi về tổ chức file Laravel/VueJS ?
Mình có chút thắc mắc về cách tổ chức file khi sử dụng VueJS trong Laravel. Mình không sử dụng component mà dùng luôn view Blade của Laravel. Chỉ khi trang nào cần thì mới dùng Vue thôi. Mình đang làm như sau: mỗi view Blade cần dùng Vue thì tạo 1 file js -> include vào view, rồi trong file js tạo 1 Vue instance. Trong webpack.mix.js có bao nhiêu file js được tạo ra thì mình mix hết kiểu như này.
user.blade.php:
<div " id="app-user">
</div>
<script src="{{ asset('js/user.js') }}"></script>
product.blade.php:
<div " id="app-product">
</div>
<script src="{{ asset('js/`product.js') }}"></script>
user.js:
require('../bootstrap');
window.Vue = require('vue');
const app_user = new Vue({
el: '#app-user',
data: {
},
created(){
console.log('user');
},
methods: {
}
});
product.js:
require('../bootstrap');
window.Vue = require('vue');
const app_product = new Vue({
el: '#app-product',
data: {
},
created(){
console.log('product');
},
methods: {
}
});
webpack.mix.js
mix.js(['resources/assets/js/app.js', 'resources/assets/js/admin.js'], 'public/js')
.js(['resources/assets/js/register_confirm/user.js',, 'public/js/user.js')
.js(['resources/assets/js/register_confirm/product.js',, 'public/js/product.js')
Làm như này thì được nhưng nếu nhiều chức năng nhiều view lên thì số lượng file quá nhiều, mất cảm tình quá. Mình có đổi mix tất cả vào 1 file thì gặp vấn đề là instanse của view này nó sẽ ko tìm được ele của view khác .
[Vue warn]: Cannot find element: #app-user
Cho mình hỏi là anh em thường tổ chức như thế nào trong trường hợp dùng như trên. Có project demo mẫu nào thì càng tốt 
Cảm ơn nhiều !
1 CÂU TRẢ LỜI
+4
Thế này tạch là đúng rồi. Laravel mặc định nó đã cấu trúc để bác dùng vue trong file blade rồi, bác cứ thế mà làm theo https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js
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-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
Theo đó, thì tất cả các page blade đều phải chứa 1 el #app:
<div id="app">
...
</div>
vẫn code html và php trong file blade bình thường, chổ nào cần xử lý bằng vue thì viết component xử lý cho chổ đó rồi sử dụng (nhớ phải đăng ký component trong app.js):
https://github.com/laravel/laravel/blob/master/resources/assets/js/components/ExampleComponent.vue
<div id="app">
<h1>Hello world</h1>
<example-component></example-component>
@foreach ($posts as $post)
<p>This is post {{ $post->id }}</p>
@endforeach
<ul>
<li v-for="comment in comments" :key="comment.id" v-text="comment.content"></li>
</ul>
</div>
<script>
var comments = @json($comments);
</script>
Cảm ơn bác nhiều
Làm như bạn Ngọc bên trên nói là hợp lý đó bạn, Laravel hỗ trợ tạo format folder Vue sẵn cho bạn rồi, phần view blade chỉ nên tạo một thẻ id=app còn bên Vue thì tạo các component rồi đăng ký chúng ở trong app.js hoặc dùng vue-router, để dễ quản lý bạn à, viết như bạn mình lại thấy giống giống bên Angular, tù lắm :v,
@manhtqb Tại sao bạn không kết hợp thêm
vue-routercho tiện nhỉ?