Rumah > Artikel > hujung hadapan web > Cara menggunakan vue untuk membuat terminal mudah alih
Cara menggunakan vue untuk membuat terminal mudah alih
- PHPzasal
- 2023-03-31 13:53:592599semak imbas
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:
< div> ;
<input v-model="content"/>
<button v-on:click="add">添加</button>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul></p>
<p></div><br></template></p>
<p><skrip><br>eksport lalai {<br> nama: 'HelloWorld',<br> data () {</p>
<pre class="brush:php;toolbar:false">return {
content: '',
list: []
}
},
kaedah: {
add() {
this.list.push(this.content)
this.content = ''
}
}
}
Kandungan dalam teg templat mewakili susun atur komponen, termasuk kotak input, butang dan senarai. Pada masa yang sama, arahan v-for digunakan dalam senarai untuk melintasi data dan menjadikannya pada halaman.
Kandungan dalam teg skrip mewakili logik komponen, termasuk dua objek, data dan kaedah Dua atribut, kandungan dan senarai, ditakrifkan dalam objek data, yang digunakan untuk menyimpan kandungan dan senarai input data oleh pengguna; objek kaedah Kaedah tambah ditakrifkan yang digunakan untuk menambah kandungan yang dimasukkan oleh pengguna ke senarai dan mengosongkan kotak input.
Kemudian, perkenalkan komponen dalam App.vue:
< /div> eksport lalai { } 5 Mulakan projek dalam arahan Masukkan arahan berikut dalam tetingkap baris: npm run dev Arahan ini akan memulakan projek dan memaparkan halaman yang baru kita tulis dalam penyemak imbas. 6. Pakej projek Masukkan arahan berikut dalam tetingkap baris arahan: npm run build Arahan ini akan membungkus projek dan meletakkan it in dist Fail bernama index.html dihasilkan dalam direktori, yang boleh diletakkan pada pelayan untuk menggunakan aplikasi. Kesimpulan Di atas adalah semua langkah untuk menggunakan vue untuk membuat aplikasi mudah alih Saya percaya bahawa selepas pengenalan artikel ini, pembaca sudah boleh mempunyai pemahaman awal tentang cara menggunakan vue. , dan berjaya melaksanakan aplikasi mudah dengan aplikasi mudah alih. Sudah tentu, dalam pembangunan sebenar, kita masih perlu terus meneroka dan mempelajari lebih banyak fungsi dan ciri vue untuk menggunakan vue dengan lebih baik untuk melakukan pembangunan aplikasi yang lebih kompleks. Atas ialah kandungan terperinci Cara menggunakan vue untuk membuat terminal mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
<HelloWorld/>
import HelloWorld daripada './components/HelloWorld'
nama: 'App ',
komponen: {HelloWorld
}