راکت

لود کردن فایل css و javascript در vuejs

چگونه میتوان فایل های جدید css و javascript را در داخل vue component لود کرد؟
میخواهم در هر component یک فایل جدید از css یا javascript را لود کنم اما نمی دانم چگونه این کار انجام بدهم.


ثبت پرسش جدید
داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

اینو نصب کن تست کن

npm install --save-dev vue-loader vue-template-compiler

داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

سلام فایل جاوااسکریپتی رو اگه بخوای داخل هر کامپوننت فراخانی کنی میتونی پکیج مورد نظرت با استفاده از NPM نصب کنی و داخل کامپوننت مورد نظرت import کنی .

    import {between, required} from 'vuelidate/lib/validators'

هر کامپوننت هم چون قسمتی از وبسایته مطمعنن استایل زیادی درون خودش نداره شما میتونی داخل کامپوننت مورد نظر داخل تگ استایل از css های خودتون استفاده کنید.

یا اینکه به صورت زیر استفاده کنید :

<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>

عزیزالله سعیدی
عزیزالله سعیدی
تخصص :Database Developer
@azizullahsaeidi6 سال پیشمطرح شد
0

خیلی ممنون @davoodkhany عزیز، اما فایل های css بصورت custom نوشته شده و در داخل فولدر assets قرار دارد.


داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

خسته نباشید داخل همون کامپوننت تگ style رو باز کنید و بعد اون فایل custom نوشته شده در داخل فولدر assets رو import کن×××

<style>
@import '/assets/css/mycss_lib.css';
</style>

عزیزالله سعیدی
عزیزالله سعیدی
تخصص :Database Developer
@azizullahsaeidi6 سال پیشمطرح شد
0

@davoodkhany عزیز روشی را کی پشنهاد کردید من استفاده کردم اما یک error دریافت کردم، البته من از ویو را در داخل لاراول استفاده میکنم و فایلم های استایل بنده داخل فولدر public قرار دارد.
app.js:7514 Uncaught Error: Cannot find module '-!../../../../node_modules/css-loader/index.js??ref--6-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./public/css/aziz.css'
at webpackMissingModule (app.js:7514)
at Object../node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/membership/MyPassport.vue?vue&type=style&index=0&lang=css& (app.js:7514)
at webpack_require__ (app.js:20)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/membership/MyPassport.vue?vue&type=style&index=0&lang=css& (app.js:38390)
at
webpack_require (app.js:20)
at Module../resources/js/components/membership/MyPassport.vue?vue&type=style&index=0&lang=css& (app.js:56986)
at
webpack_require (app.js:20)
at Module../resources/js/components/membership/MyPassport.vue (app.js:56935)
at
webpack_require__ (app.js:20)
at Module../resources/js/routes.js (app.js:57021)


داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

لاراول نسخه 6 استفاده می کنید ؟؟؟؟


داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

اینو نصب کن تست کن

npm install --save-dev vue-loader vue-template-compiler

عزیزالله سعیدی
عزیزالله سعیدی
تخصص :Database Developer
@azizullahsaeidi6 سال پیشمطرح شد
0

بله @davoodkhany عزیز، از نسخه 6 لاراول استفاده میکنم


داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

من همینو تو لاراول 5.8 دارم استفاده می کنم بعضی از پکیج ها تو لاراول 6 از فایل پکیج جیسون پاک شده یعنی باید خودتون نصب کنید و تست کنید ومشکل رو رفع کنید .

اینو کم دارید :

https://vue-loader.vuejs.org/guide/#vue-cli

بعدش داخل کامپوننت برای style مشخص کنید که

lang="css"

یا مثال زیر :

<style  lang="css">

    @import '/css/style.css';

    thead > tr {
        background-color:black!important;
        color:white;
    }
    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
        background-color: #F7DFE1;
    }
    .flex-container {
        display: flex;
        justify-content :space-between;
    }

    .tr-expand td .content-tr-expand, .tr-expand td .tr-expand--close {
        display: block !important;
    }
    .td-check{
        color:red !important;
    }

    @media (max-width:991px){
        .card_single{
            flex-wrap: wrap;
        }
    }

</style>

انشالله که درست بشه


عزیزالله سعیدی
عزیزالله سعیدی
تخصص :Database Developer
@azizullahsaeidi6 سال پیشمطرح شد
0

@davoodkhany عزیز از راهنمایی عالی تان ممنونم.


داود خانی
داود خانی
تخصص :برنامه نویس لاراول و متخصص سئو
@davoodkhany6 سال پیشمطرح شد
0

سلام خسته نباشی اگه کارت راه افتاده اون بخشی که جواب درست بوده رو بهترین پاسخ بزار تا دیگران هم استفاده کنن مرسی. :)))


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام