Bagaimana untuk membuat projek mudah dengan vue

Dengan perkembangan pesat rangka kerja Vue, semakin ramai orang mula menggunakannya untuk membina projek bahagian hadapan. Vue mudah dipelajari dan digunakan, fleksibel, cekap dan boleh diguna semula, begitu banyak projek hadapan baharu kini dibangunkan menggunakan Vue. Jadi, bagaimana untuk melaksanakan projek mudah dengan Vue? Artikel ini akan menjawabnya satu persatu untuk anda.

Langkah pertama: Sediakan persekitaran Vue

Sebelum anda mula menggunakan Vue, anda perlu memasang persekitaran berjalan Vue, termasuk Vue CLI dan Node.js. Vue CLI ialah alat baris arahan untuk Vue Ia membolehkan anda membuat projek Vue baharu dan mengurus projek yang lebih kompleks melalui antara muka UI Vue. Node.js ialah pergantungan yang diperlukan bagi Vue CLI, yang membolehkan projek itu dijalankan dalam penyemak imbas.

Selepas memasang Vue CLI dan Node.js, anda boleh membuat projek Vue baharu dengan mudah. Menggunakan Vue CLI, anda boleh mencipta projek Vue serba baharu dengan arahan berikut:

vue create my-project
cd my-project
npm run serve

Proses ini mungkin mengambil sedikit masa untuk disiapkan, tetapi setelah selesai, anda boleh menjalankan projek dan melihatnya. Masukkan http://localhost:8080/ dalam pelayar untuk mengakses projek yang sedang berjalan.

Langkah 2: Reka bentuk komponen Vue

Dalam Vue, anda perlu mereka bentuk berbilang komponen untuk merealisasikan keseluruhan fungsi projek. Komponen boleh difahami sebagai pelbagai elemen yang dipaparkan pada halaman web, seperti butang, kotak teks, gambar, dll. Melalui reka bentuk dan gabungan komponen, projek yang lengkap dapat dibina.

Apabila mereka bentuk komponen, anda perlu mempertimbangkan perkara berikut:

1. Fungsi komponen: Apakah fungsi yang anda ingin capai? Seperti log masuk, pendaftaran, muat naik maklumat, dsb.
2. Gaya komponen: Apakah gaya yang perlu ada pada komponen? Warna, fon, saiz, sempadan, dsb.
3. Data komponen: Apakah data yang diperlukan oleh komponen? Bagaimana untuk mendapatkan data daripada komponen induk? Bagaimana untuk menghantar data kepada komponen kanak-kanak?
4. Peristiwa komponen: Apakah peristiwa yang perlu dijawab oleh komponen? Bagaimana untuk mengendalikan acara ini?

Mengikuti idea reka bentuk di atas, anda boleh membina komponen yang diperlukan secara beransur-ansur.

Langkah 3: Bina penghalaan Vue

Dalam Vue, penghalaan halaman diuruskan oleh Penghala Vue. Melalui Penghala Vue, anda boleh menentukan berbilang peraturan penghalaan dan memetakan peraturan penghalaan kepada komponen yang sepadan. Penghala Vue boleh menolak dan melompat antara halaman yang berbeza dengan mudah.

Untuk menggunakan Penghala Vue, anda perlu memasangnya terlebih dahulu:

npm install vue-router --save

Selepas pemasangan, buat direktori penghala dalam projek dan buat fail index.js di mana peraturan penghalaan ditentukan :

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

Dalam kod di atas, dua peraturan penghalaan ditakrifkan, satu ialah laluan halaman utama "/", dan satu lagi ialah laluan halaman tentang "/about". Setiap peraturan penghalaan dipetakan ke komponen Vue, yang telah ditakrifkan sebelum ini.

Langkah 4: Pengurusan Data

Dalam Vue, anda perlu mempertimbangkan pengurusan data. Data boleh diurus melalui Vuex, corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Ia mempunyai objek kedai global yang menguruskan keadaan keseluruhan aplikasi. Vuex menyediakan beberapa API khas untuk mengubah suai kedai, yang membolehkan data dalam komponen lain disimpan dalam penyegerakan.

Untuk menggunakan Vuex, anda perlu memasangnya terlebih dahulu:

npm install vuex --save

Kemudian, cipta direktori kedai dalam projek dan buat fail index.js di mana kod pengurusan negeri ditakrifkan:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count += 1;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  modules: {},
});

Dalam kod di atas, objek stor ditakrifkan, yang mengandungi tiga atribut: keadaan, mutasi dan tindakan. Atribut keadaan digunakan untuk menyimpan keadaan, atribut mutasi mengandungi beberapa kaedah untuk mengubah suai keadaan, dan atribut tindakan mengandungi beberapa operasi tak segerak.

Langkah 5: Permintaan API

Dalam Vue, anda perlu berinteraksi dengan data hujung belakang. Panggilan API RESTful boleh dilaksanakan dalam Vue melalui Axios. Axios ialah perpustakaan HTTP berasaskan Promise yang boleh berinteraksi dengan penyemak imbas dan platform Node.js.

Untuk menggunakan Axios, anda perlu memasangnya dahulu:

npm install axios --save

Kemudian, di dalam komponen Vue, anda boleh membuat permintaan data dengan memanggil Axios:

import axios from 'axios';

methods: {
  fetchData() {
    axios.get('/api/data').then((res) => {
      this.data = res.data;
    });
  },
},

Dalam perkara di atas kod, gunakan Axios menghantar permintaan GET dan menyimpan data yang diperoleh dalam atribut data komponen.

Langkah 6: Terbitkan dan gunakan

Apabila projek Vue anda dibangunkan, anda perlu menerbitkan dan menggunakan ia ke pelayan. Penerbitan dan penggunaan dibahagikan kepada dua proses: pertama membungkus projek, dan kemudian menggunakan fail yang dibungkus ke pelayan.

Untuk membungkus projek, anda boleh menjalankan arahan berikut:

npm run build

Ini akan menjana fail berpakej dalam direktori dist. Kemudian, anda boleh menggunakan fail dalam direktori dist ke pelayan.

Kesimpulan

Di atas adalah langkah-langkah tentang cara menggunakan Vue untuk melaksanakan projek mudah. Melalui langkah di atas, anda boleh mempelajari cara menggunakan Vue untuk mereka bentuk komponen, mengurus penghalaan, mengurus status, meminta API dan akhirnya membungkus dan menggunakan projek. Jika anda tidak cukup mengetahui tentang Vue, anda boleh terus mempelajari lebih lanjut dan menguasai teknologi yang lebih maju.

Atas ialah kandungan terperinci Bagaimana untuk membuat projek mudah dengan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!