آفلاین
user-avatar

افزودن فایل های css و js مازاد در برخی از صفحات کامپوننت شده در vuejs

3 سال پیش
توسط مهدی آپدیت شد
آفلاین
user-avatar
سید رضا موسوی ( 6567 تجربه )
3 سال پیش
تخصص : برنامه

موضوع : VueJs
سلام چند وقت پیش این سوال برای بنده مطرح شد و در لینک زیر مهندس موسوی راه حلی نسبتا گره گشا ارائه کردند
https://roocket.ir/series/2-learn-vuejs/episode/2
برای افزودن فایل های css و js مازاد خودمون مثل پلاگین ها و فایل های وابسته بهشون باید چیکار کرد؟
مثلا من در صفحه کامپوننت لاگین می خواهم یکسری تصاویر و فایل های css و جاوااسکریپت لود کنم که در دیگر صفحات فراخوانی و لود نشوند
پس نمی خواهم لینک ها را در تنها صفحه index.html خودم قرار بدهم، مسلما وقتی هر صفحه ای رو به کامپوننت تبدیل می کنیم میخواهم لینک های مرتبط با اون صفحه رو هم داخل همون کامپوننت Import کنیم اما ارور میگیرم.
هرکسی کار کرده، پروژه های vuejs بدون لاراول راهنمایی کنه، بچه های سمت فرانت :)

بهترین پاسخ انتخاب شده توسط سید رضا موسوی
آفلاین
user-avatar
مهدی
3 سال پیش

واسه جاوااسکریپت که توی قسمت اسکریپت فایل vue. مربوطه import میکنم و اگه پلاگینه که (...) Vue.use رو مینویسیم

<template>  
    //tags  
</template>  
<script>  
import 'bootstrap'

    // for plugins 
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate)

    export default {
        //...
    }

</script> 

واسه استایل هم vue-loader این مشکل رو حل کرده به فرم زیر عمل کن توی فایل vue. مربوطه یک تگ استایل قرار بده و داخلش scoped رو بنویس و تمام

<template>  
    <button class="button">Click me!</button>  
</template>

<style scoped>  
.button {  
border: 1px solid red;  
}  
</style>

لینک منبع

آفلاین
user-avatar
مهدی ( 23232 تجربه )
3 سال پیش

واسه جاوااسکریپت که توی قسمت اسکریپت فایل vue. مربوطه import میکنم و اگه پلاگینه که (...) Vue.use رو مینویسیم

<template>  
    //tags  
</template>  
<script>  
import 'bootstrap'

    // for plugins 
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate)

    export default {
        //...
    }

</script> 

واسه استایل هم vue-loader این مشکل رو حل کرده به فرم زیر عمل کن توی فایل vue. مربوطه یک تگ استایل قرار بده و داخلش scoped رو بنویس و تمام

<template>  
    <button class="button">Click me!</button>  
</template>

<style scoped>  
.button {  
border: 1px solid red;  
}  
</style>

لینک منبع

برای ارسال پاسخ باید وارد سایت شوید