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

- 9 ماه پیش
توسط مهدی آپدیت شد
سید رضا موسوی ( 3477 تجربه )
9 ماه پیش

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

بهترین پاسخ انتخاب شده توسط سید رضا موسوی
مهدی
9 ماه پیش

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

لینک منبع

مهدی ( 9037 تجربه )
9 ماه پیش

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

لینک منبع

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