• 0

Vue Vite Nedir?

3 hafta önce , Okuma süresi 2 dakika.

Vite, anında etkin modül değişimi ve isteğe bağlı True derleme sunan Lightening sunucudur.
Vue Vite Nedir?

Bu araç, Vuejs Yaratıcısı tarafından yaratılmıştır, ancak bu, yalnızca Vuejs'de kullanılabileceği anlamına gelmez, Reactjs gibi diğer kütüphaneler tarafından kullanılabilir.

Vite, kodunuzu geliştirme sırasında yerel ES Modülü içe aktarmaları aracılığıyla sunmanıza olanak tanır ve Vue tek dosya bileşenlerini paket adımı olmadan geliştirmenize olanak tanır.

Vite ile Başlarken

Vite'ı nasıl kullanabileceğimize bir göz atalım. Öncelikle Vite, Vue 3 için oluşturuldu, ancak yine de onu Vue 2 Uygulamamızda kullanabiliriz.
Seçtiğiniz herhangi bir dizine gidin ve terminalinizi açın ve aşağıdakileri yazın:

npx create-vite-app <name-of-project>

Bu komutu çalıştırdıktan sonra cd, uygulama bağımlılığını yüklemek için komutu ve install run npm install komutunu kullanarak proje dizinine geçmeniz gerekecektir.

 cd vite-test
    npm install
    code .

code. komutu uygulamamızı Vs kodunda açacaktır.

Daha sonra npm run dev uygulamamızı çalıştırmak için çalıştırabiliriz.

Vite varsayılan olarak 3000 numaralı bağlantı noktasında çalışır, bu nedenle uygulamamıza şunu kullanarak erişebiliriz: localhost:3000

Artık uygulamamız çalıştığına göre, Hot Module Replacement'ın gerçekte nasıl çalıştığını görelim .

Hot Module Replacement işlemleri için HelloWorld.vue 'yi kullanacağız; Hemen kodlara geçelim; 

   <template>
      <h5>{{ msg }}</h5>
      <button @click="count++">count is: {{ count }}</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test hot module replacement.
      </p>
    </template>
    <script>
    export default {
      name: "HelloWorld",
      props: {
        msg: String,
      },
      data() {
        return {
          count: 0,
        };
      },
    };
    </script>

İşaretlemede gerçekten herhangi bir şeyi değiştirirseniz, yeniden yükleme süresinin normal Vuejs Uygulamasından çok daha hızlı olduğunu fark edeceksiniz.

main.js Dosyaya bakarsanız , kaputun altındaki Vuej'lerde hala çalıştığını göreceksiniz.
Kodumuzu tarayıcıda incelersek, main.js dosyayı modül olarak çağırdığını göreceğiz.

Main.js dosyasını takip ederseniz, Vite'ın bir paket yerine, uygulamayı oldukça hızlı hale getiren modüller sunduğunu göreceksiniz.

Tüm Vuejs kodlarınızın yine de etkili bir şekilde çalışacağını unutmayın.

Vue Router'ı Vite'a Kurmak

Normal vuejs paketlerinizi, aşağıdakileri çalıştırarak Vue yönlendiricisi gibi vite uygulamanıza yine de yükleyebilirsiniz:

 npm i --save [email protected]

Bu, Vue Router'ın en son sürümünü uygulamanıza yükleyecektir. Ardından bir router.jsdosya oluşturun ve bazı Router tanımlayın:

  import {
        createWebHistory,
        createRouter
    } from "vue-router";
    import Home from "./components/HelloWorld.vue";
    const history = createWebHistory();
    const routes = [{
            path: "/",
            component: Home
        },
    ];
    const router = createRouter({
        history,
        routes
    });
    export default router;

Bunu yaptıktan sonra şimdi router.js dosyamızı şu şekilde  main.js dosyamıza kaydedebiliriz:

 import {
        createApp
    } from 'vue'
    import App from './App.vue'
    import './index.css'
    import router from "./router";

    createApp(App).use(router).mount('#app')

Bunu yaptıktan sonra, App.vue tüm bileşenlerimizi oluşturması için kök bileşenimizi buna değiştirmeliyiz :

 <template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <HelloWorld msg="Hello Vue 3.0 + Vite" />
      <router-view />
    </template>
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    export default {
      name: "App",
      components: {
        HelloWorld,
      },
    };
    </script>

Ve oraya giderseniz, seçtiğiniz başka herhangi bir özel rotayı kaydedebilirsiniz.

Sonuç olarak, Vuejs Vite hala Deneyseldir ve Vue 3'te tam olarak çalışacaktır. Nasıl çalıştığına dair daha fazla aşinalık kazanmak için onu yine de Vue 2 uygulamalarınıza entegre edebilirsiniz.

#javascript