Giriş yapmadınız.

Duyuru

TÜRKÇE KİTAP DUYURUSU:
Laravel 5 : Laravel 5.1 Güzelliği (Türkçe)
Vue.js 2 : Vue.js 2 Majesteleri (Türkçe)

#1 11.04.2018 14:56:08

dark
Üye
Kayıtlı: 15.02.2018
Mesajlar: 13

vue js de js tanımlamak

merhaba arkadaşlar 2 gündür yapamadğım ve o kadar araştırmama rağmen bulamadığım bi soru hakkında yardım istiyorum?
şimdi bir yapım var herşey normal çalışıyor fakat ben node_ değilde farklı bir siteden indirdiğim bir js i sayfama dahil ekmek istiyorum index.blade.php dahil ediyorum soru yok ama çalışmıyor webpack.mix dahil ediyorum şu hatayı alıyorum normalde webpack jquery dahil Uncaught ReferenceError: $ is not defined... ve en son navbar.vue import ettim yine aynı hatayı alıyorum bu arada blade değil vue sayfalarını kullanıyorum.. yardımınız için şimdiden teşekkürler

Çevrimdışı

#2 11.04.2018 16:11:17

sineld
Yönetici
Yer: Bursa
Kayıtlı: 26.12.2012
Mesajlar: 1,306
Website

Çevrimdışı

#3 11.04.2018 16:21:02

dark
Üye
Kayıtlı: 15.02.2018
Mesajlar: 13

Yanıt: vue js de js tanımlamak

çalıştırıyorum hocam şimdi söyliyeyim ben node_modul de ekli olmayan bir js kullanıyorum yani söyle eski sayfamda kullandığım bir kaç kutuphane var onları vue js dahil etmek istiyorum ama olmuyor yapamdım 3 gün oldu

Çevrimdışı

#4 11.04.2018 16:23:28

sineld
Yönetici
Yer: Bursa
Kayıtlı: 26.12.2012
Mesajlar: 1,306
Website

Yanıt: vue js de js tanımlamak

Bunları Vue'ye dahilş etmen gerekmez zaten.
Bağımsız olarak kullanman gerekir.

Gördüğüm kadarı ile $ şeklinde muhtemelen jquery kullanıyorsun ve jquery çağırılmamış, ekleyip dener misin?

Çevrimdışı

#5 11.04.2018 16:25:19

dark
Üye
Kayıtlı: 15.02.2018
Mesajlar: 13

Yanıt: vue js de js tanımlamak

hoçam kodlarımı paylaşayım

Çevrimdışı

#6 11.04.2018 16:30:05

dark
Üye
Kayıtlı: 15.02.2018
Mesajlar: 13

Yanıt: vue js de js tanımlamak

hocam ben bu projeceyi bu siteden indirdim  --
aşağıdaki kod benim webpaket dosyama ait
benim kullanmak istediğim js dosyam ise
bu ve bu sayfada bulunan diğer js dosyaları

const path = require('path')
const mix = require('laravel-mix')

// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

mix.config.vue.esModule = true
// mix.disableNotifications();

// mix.scripts(['resources/js/components/new/sfstatic/Scripts.b.1.0.5036.0/all.js'])

mix
  // .js('resources/assets/js/app.js', 'public/js')
  .js('resources/assets/js/app.js', 'public/js')

  .sass('resources/assets/sass/app.scss', 'public/css')

  .sourceMaps()
/*
  .disableNotifications()

mix.scripts([
      'resources/assets/js/components/new/sfstatic/Scripts.b.1.0.5036.0/all.js'
    ], 'public/js')

*/

/*
if (mix.inProduction()) {
  mix.version()
*/

mix.extract([
  'vue',
  'vform',
  'axios',
  'vuex',
  'jquery',
  'popper.js',
  'vue-i18n',
  'vue-meta',
  'js-cookie',
  'bootstrap',
  'vue-router',
  'sweetalert2',
  'vuex-router-sync',
  '@fortawesome/fontawesome',
  '@fortawesome/vue-fontawesome',



])



mix.webpackConfig({

 
  plugins: [
    

  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/assets/js')
    }
  },
  output: {
    chunkFilename: 'js/[name].[chunkhash].js',
    publicPath: mix.config.hmr ? '//localhost:8080' : '/'

  }

})

Son düzenleyen dark (12.04.2018 12:53:12)

Çevrimdışı

#7 11.04.2018 21:55:38

sineld
Yönetici
Yer: Bursa
Kayıtlı: 26.12.2012
Mesajlar: 1,306
Website

Yanıt: vue js de js tanımlamak

jquery için kullanacağınız ilave kütüphaneleri all.js dosyasından sonra çağırmalısınız.

all.js
noty.jquery.min.js
v.s

gibi

Çevrimdışı

#8 11.04.2018 22:04:41

dark
Üye
Kayıtlı: 15.02.2018
Mesajlar: 13

Yanıt: vue js de js tanımlamak

Hocam İnan’ın onu da yaptım olmadı 3 gündür altına üstüne getiriyorum olmuyor angularjs de böyle değildi index.blade.php ye direk script açıp src adresini veriyordum çalışıyordu burda öyle de çalışmıyoror hayır İngizlice de pek yok İngilizce araştırayım diyim:D hocam siz bu ısın kitabını yazmışsınız İnan’ın Suan elim kolum bağlandı

Çevrimdışı

#9 12.04.2018 08:53:51

alihankoc
Üye
Kayıtlı: 14.09.2017
Mesajlar: 31

Yanıt: vue js de js tanımlamak

Daha önce kullandığım bir çözüm:
jquery i öncelikle npm ile projenize dahil edin.

npm install jquery --save

Daha sonra webpack.config.js dosyasında ayarlara aşağıdaki plugins bölümünü ekleyin.

  plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ],

artık jquery vue içinde global olarak kullanılabilir.

$('falanca filan şeklinde')

hatta

$(function(){
//bu document ready function kısaltması. Ancak içinde yazacağınız kodları vue içinde created: içinde yazarsanız zaten aynı işi görecektir. 
})

//////////// DÜZENLEME //////////////////
aşağıdaki sizin kodlarınız.

mix.webpackConfig({

 
  plugins: [
    // JQUERY BURADA DAHİL EDİLEBİLİR:
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/assets/js')
    }
  },
  output: {
    chunkFilename: 'js/[name].[chunkhash].js',
    publicPath: mix.config.hmr ? '//localhost:8080' : '/'

  }

})

Son düzenleyen alihankoc (12.04.2018 08:56:26)

Çevrimdışı

#10 12.04.2018 09:43:32

sineld
Yönetici
Yer: Bursa
Kayıtlı: 26.12.2012
Mesajlar: 1,306
Website

Çevrimdışı

#11 12.04.2018 11:17:16

dark
Üye
Kayıtlı: 15.02.2018
Mesajlar: 13

Yanıt: vue js de js tanımlamak

hocam öncelikle teşekkür ederim tamam jqery kodlarını navber.vue import ettiğimde sorun yok çalşıyor fakat all.js navber.vue import ettğimde bu sefer şöyle bir sorun alıyorum

Uncaught TypeError: Cannot set property 'exports' of undefined
    at eval (all.js?a3d7:5)
    at Object.eval (all.js?a3d7:5)
    at eval (all.js?a3d7:25)
    at Object.<anonymous> (app.js:556)
    at __webpack_require__ (manifest.js:55)
    at eval (31:5)
    at Object.<anonymous> (app.js:107)
    at __webpack_require__ (manifest.js:55)
    at eval (92:1)
    at Object.<anonymous> (app.js:357)

Çevrimdışı

Forum alt kısmı