Panduan pembangunan pantas yang mesti ada untuk pemula VUE3

Panduan pembangunan pantas yang mesti ada untuk pemula VUE3

Vue ialah rangka kerja JavaScript yang popular, kemudahan penggunaannya, tahap penyesuaian yang tinggi dan mod pembangunan pantas menjadikannya popular dalam pembangunan bahagian hadapan. Vue3 terbaharu memperkenalkan ciri yang lebih berkuasa, termasuk pengoptimuman prestasi, sokongan TypeScript, API Komposisi, pemapar tersuai yang lebih baik, dsb. Artikel ini akan menyediakan panduan pembangunan pantas untuk pemula Vue3 untuk membantu anda memulakan pembangunan Vue3 dengan cepat.

1. Pasang Vue3

Pertama, sebelum memulakan pembangunan Vue3, kita perlu memasang Vue3. Anda boleh memasang Vue3 dalam projek melalui arahan berikut:

npm install vue@next

Jika anda menggunakan CDN untuk memperkenalkan Vue3, anda perlu menggunakan kod berikut:

<script src="https://unpkg.com/vue@next"></script>

2. Buat aplikasi Vue3

Selepas memasang Vue3, kami boleh mula membina aplikasi. Vue3 menyediakan alatan Vue CLI untuk membantu kami membuat dan mengkonfigurasi aplikasi Vue3 dengan cepat.

Untuk memasang Vue CLI, anda boleh menggunakan arahan berikut:

npm install -g @vue/cli

Arahan untuk mencipta projek baharu adalah seperti berikut:

vue create my-project

3. Gunakan komponen Vue3

Vue3 menggunakan pemapar yang ditulis semula sepenuhnya, jadi anda perlu memberi perhatian kepada beberapa perubahan apabila menggunakan komponen Vue3 Berikut ialah contoh komponen Vue3:

// HelloWorld.vue
<template>
  <div>
    <h1>Hello world!</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
});
</script>

Perlu diperhatikan. bahawa fungsi defineComponent perlu digunakan dalam komponen Vue3 Define dan bukannya Vue.extend dalam Vue2.

4. Gunakan API Komposisi

API Komposisi ialah ciri baharu dalam Vue3, yang membolehkan kami mengatur dan menggunakan semula kod logik komponen dengan lebih baik. Berikut ialah contoh:

// HelloWorld.vue
<template>
  <div>
    <h1>Hello world!</h1>
    <p>Current count is: {{ count }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const count = ref(0);

    const incrementCount = () => {
      count.value++;
    };

    return {
      count,
      incrementCount,
    };
  },
});
</script>

Seperti yang anda lihat, dalam API Komposisi, kita boleh meletakkan kod logik dalam fungsi setup, dan kemudian mendedahkan pembolehubah dan fungsi kepada templat melalui return kenyataan.

5. Penghalaan dengan Vue3

Penghala Vue3 mengandungi beberapa ciri dan perubahan baharu, berikut ialah contoh:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Dengan penghala dalam Vue2 Sebagai perbandingan, cara menggunakan penghala dalam Vue3 telah berubah sedikit. Anda perlu menggunakan fungsi createRouter dan createWebHistory untuk mencipta penghala.

6. Menggunakan pengurusan keadaan Vue3

Pengurusan negeri dalam Vue3 juga telah berubah, berikut ialah contoh:

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    count(state) {
      return state.count;
    },
  },
});

Seperti yang anda lihat, dalam Vue3 , kita perlu menggunakan fungsi createStore untuk mencipta contoh pengurusan negeri baharu. Pada masa yang sama, anda perlu menggunakan parameter actions dalam context untuk memanggil mutations.

7. Ringkasan

Vue3 ialah rangka kerja JavaScript yang berkuasa dan mudah digunakan yang boleh membangunkan aplikasi berasaskan web dengan cepat. Dengan memasang Vue3, mencipta aplikasi Vue3, menggunakan komponen Vue3, API Komposisi, penghalaan Vue3 dan pengurusan keadaan Vue3, kami dapat memahami dengan lebih baik ciri-ciri dan kaedah aplikasi praktikal Vue3, dan mengumpul pengalaman dan pengetahuan berharga untuk pembelajaran lanjut pembangunan Vue3.

Atas ialah kandungan terperinci Panduan pembangunan pantas yang mesti ada untuk pemula VUE3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!