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

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

لینک کوتاه اشتراک گذاری

0

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

بهترین پاسخ
آفلاین
user-avatar
مهدی
4 سال پیش

واسه جاوااسکریپت که توی قسمت اسکریپت فایل 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
مهدی ( 23322 تجربه )
4 سال پیش

لینک کوتاه اشتراک گذاری

1

واسه جاوااسکریپت که توی قسمت اسکریپت فایل 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>

لینک منبع

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.