Cara menggunakan vue untuk membuat terminal mudah alih

Kata Pengantar

Dalam masyarakat maklumat yang berkembang pesat hari ini, aplikasi mudah alih menjadi semakin popular, dan vue, sebagai rangka kerja bahagian hadapan yang mudah digunakan dan cekap, juga digunakan dalam pembangunan aplikasi mudah alih Telah digunakan secara meluas. Jadi, seterusnya kami akan memperkenalkan cara menggunakan vue untuk membuat terminal mudah alih.

Teks

1. Pasang vue-cli

Sebelum mula menggunakan vue untuk pembangunan bahagian hadapan mudah alih, kita perlu memasang vue-cli terlebih dahulu. Masukkan arahan berikut dalam tetingkap baris arahan:

npm install -g vue-cli

Selepas pemasangan selesai, kita boleh menggunakan vue-cli untuk mencipta projek.

2. Cipta projek

Masukkan arahan berikut dalam tetingkap baris arahan:

vue init webpack my-project

di mana, my-project adalah Nama projek boleh dinamakan secara bebas mengikut keperluan anda sendiri.

3. Pasang kebergantungan

Masukkan direktori projek, dan kemudian masukkan arahan berikut dalam tetingkap baris arahan:

npm install

Arahan ini akan pasang semua kebergantungan projek Semua kebergantungan diperlukan.

4. Tulis kod

Sebelum menulis kod, kita perlu membina halaman mudah sebagai paparan, yang termasuk kotak input, butang dan senarai. klik butang untuk Kandungan ditambahkan pada senarai.

Untuk menggunakan vue, kita perlu memperkenalkan vue ke dalam main.js dahulu:

import Vue daripada 'vue'

Kemudian, tambahkan teg div dalam index.html :

Seterusnya, kita perlu menulis komponen dan melekapkannya pada teg div.

Mula-mula, cipta folder komponen dalam direktori src, dan kemudian buat fail HelloWorld.vue di bawah folder, kodnya adalah seperti berikut: