Bagaimana untuk membina aplikasi vue

Vue ialah rangka kerja JavaScript yang popular untuk mencipta aplikasi web interaktif. Ia membantu pembangun membina komponen yang fleksibel, responsif dan boleh digunakan semula untuk meningkatkan kecekapan pembangunan. Dalam artikel ini, kami akan melihat secara mendalam tentang cara membina aplikasi Vue. Kami akan mulakan dengan memasang Vue, kemudian meliputi komponen Vue, penghalaan, pengurusan negeri dan amalan terbaik untuk membina aplikasi Vue.

Langkah Pertama: Pasang Vue

Sebelum anda mula, Vue mesti dipasang secara setempat. Vue boleh dipasang menggunakan npm atau benang. Berikut ialah contoh arahan:

npm install vue

atau

yarn add vue

Setelah pemasangan selesai, anda boleh mula membina aplikasi Vue anda.

Langkah 2: Buat komponen Vue

Inti Vue ialah komponen, yang merupakan blok kod boleh guna semula yang boleh mengandungi HTML, CSS dan JavaScript. Mencipta komponen Vue adalah sangat mudah. Berikut ialah contoh komponen Vue yang mudah:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '欢迎来到Vue应用程序',
        message: '这是一个Vue应用程序的示例'
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-size: 2em;
    color: #42b983;
  }
</style>

Dalam contoh ini, kami mencipta komponen dan mentakrifkan beberapa HTML dalam templat komponen, dan kemudian menentukan beberapa data dalam JavaScript komponen.

Langkah 3: Buat penghalaan Vue

Jika anda ingin mencipta aplikasi Vue berbilang halaman, anda memerlukan penghalaan Vue. Penghalaan Vue ialah perpustakaan untuk memetakan laluan URL ke komponen Vue. Penghalaan Vue membantu dalam mencipta Aplikasi Halaman Tunggal (SPA), yang hanya mempunyai satu halaman tetapi boleh bertukar antara paparan yang berbeza.

Sebelum bermula, anda perlu memasang penghalaan Vue. Anda boleh menggunakan arahan berikut untuk memasang penghalaan Vue:

npm install vue-router

atau

yarn add vue-router

Selepas pemasangan selesai, anda perlu menentukan laluan dalam aplikasi Vue. Kod sampel untuk menentukan laluan adalah seperti berikut:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

Dalam contoh ini, kami mentakrifkan tiga laluan: Rumah, Perihal dan Kenalan. Setiap laluan memetakan kepada komponen. Jika laluan URL sepadan dengan salah satu laluan, maka laluan itu akan memaparkan komponen yang sepadan.

Langkah 4: Cipta pengurusan keadaan Vue

Pengurusan keadaan Vue digunakan untuk mengurus keadaan dalam aplikasi Vue. Status boleh terdiri daripada sebarang jenis, seperti rentetan, nombor, objek atau tatasusunan. Pengurusan keadaan Vue biasanya menggunakan perpustakaan Vuex.

Sebelum anda bermula, anda perlu memasang Vuex. Vuex boleh dipasang menggunakan arahan berikut:

npm install vuex

atau

yarn add vuex

Selepas pemasangan selesai, keadaan perlu ditakrifkan dalam aplikasi Vue. Kod sampel untuk menentukan keadaan adalah seperti berikut:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementCounter ({commit}) {
      commit('increment')
    }
  },
  getters: {
    getCount: state => state.count
  }
})

Dalam contoh ini, kami mentakrifkan keadaan yang dipanggil "kira" dan mencipta kaedah mutasi yang dipanggil "kenaikan" untuk mengemas kini keadaan ini. Kaedah tindakan bernama "incrementCounter" juga dicipta supaya kaedah ini boleh dipanggil dalam komponen untuk mencetuskan mutasi. Akhir sekali, kami mentakrifkan kaedah pengambil yang dipanggil "getCount" untuk mendapatkan nilai semasa keadaan.

Langkah 5: Bina aplikasi Vue

Membina aplikasi Vue memerlukan penggunaan Vue CLI (scaffolding). Vue CLI ialah alat baris arahan rasmi Vue.js yang digunakan untuk mencipta projek Vue baharu dengan pantas, membina komponen Vue, melaksanakan penyahpepijatan tempatan dan menjana versi persekitaran pengeluaran.

Sebelum memasang Vue CLI, anda perlu memasang Node.js dan npm. Anda kemudiannya boleh menggunakan arahan berikut untuk memasang Vue CLI:

npm install -g @vue/cli

atau

yarn global add @vue/cli

Setelah pemasangan selesai, anda boleh menggunakan Vue CLI untuk mencipta projek Vue baharu. Cipta projek Vue baharu menggunakan arahan berikut:

vue create my-project

Setelah dibuat, mulakan aplikasi Vue menggunakan arahan berikut:

cd my-project
npm run serve

Sebagai alternatif, versi pengeluaran aplikasi Vue boleh dibina menggunakan Vue CLI . Bina versi pengeluaran menggunakan arahan berikut:

npm run build

Setelah binaan selesai, fail yang dijana boleh dimuat naik ke pelayan web anda dan digunakan dalam pengeluaran.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara membina aplikasi Vue. Kami bermula dengan memasang Vue dan komponen Vue yang dilindungi, penghalaan, pengurusan negeri dan amalan terbaik untuk membina aplikasi Vue. Dengan langkah ini, anda boleh membina aplikasi Vue yang berkuasa, cekap dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk membina aplikasi vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!