عزیزالله سعیدی
5 سال پیش توسط عزیزالله سعیدی مطرح شد
10 پاسخ

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

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


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

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

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

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

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

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

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

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

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

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

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


داود خانی
تخصص : برنامه نویس لاراول و متخصص سئو...
@davoodkhany 5 سال پیش آپدیت شد
0

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

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

عزیزالله سعیدی
تخصص : Database Developer
@azizullahsaeidi 5 سال پیش مطرح شد
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)


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

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


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

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

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

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

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


داود خانی
تخصص : برنامه نویس لاراول و متخصص سئو...
@davoodkhany 5 سال پیش مطرح شد
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
@azizullahsaeidi 5 سال پیش مطرح شد
0

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


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

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


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

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