Bagaimana untuk membuat projek uni-app? Penerangan proses

Bagaimana untuk membuat projek uni-app? Artikel ini akan memberi anda penjelasan sistematik tentang proses membuat uni-app. Saya harap ia akan membantu anda!

Proses membuat uni-app:

Mengandungi sejumlah besar kemahiran penting bahagian hadapan semasa, seperti vue, applet WeChat , enkapsulasi komponen, enkapsulasi gerak isyarat mudah alih, paging data, aksios, momen, reka letak fleksibel, sass, main balik video, muat turun video dan fungsi lain. [Cadangan berkaitan: "tutorial uniapp"]

1.1.1.1. - app

uni-app ialah rangka kerja yang menggunakan sintaks vue.js untuk membangunkan semua aplikasi bahagian hadapan boleh membangunkan pelbagai perkara

juga dipanggil rangka kerja Pembangunan penuh

2. >

Pengalaman pertama uni-app

Pengenalan kepada struktur projek

Gaya dan sass

Sintaks asas

Acara Komponen

Kitaran hayat

• 3 Asas dahulu, kemudian projek
• Timbunan teknologi yang diperlukan ialah
• html
• css
• JavaScript

vue

WeChat applet

uni-app

uni-ui

• uni-api
• moment.js
• Pengenkapsulan gerak isyarat
• 4. Bina projek dengan perancah
1. Situasi keseluruhan Pasang
• 2 Cipta projek
• 3. Mulakan projek (WeChat applet)

4 Projek alat pembangun applet WeChat

Ingat untuk memasuki direktori akar

Direktori Projek 4.1

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project

npm run dev:mp-weixin

4.2 Gaya dan sass

Sokongan rpx program mini dan vw dan vh h5 mempunyai sass terbina dalam konfigurasi. Anda hanya perlu memasang kebergantungan yang sepadan "npm install sass-loader node-sass "

Dalam komponen vue, tambahkan atribut "

5. Sintaks asasSintaks asas Vue

Seperti v-bind, v-if, v-show, v-for dan seterusnya
• 6 Penggunaan acara
• v-on

Komponen

Komponen Penggunaan mudah

Penglaluan parameter komponen

Slot komponen

7.1 Penggunaan komponen yang mudah

• Takrifan komponen
• Pengenalan komponen
• Pendaftaran komponen

Penggunaan komponen

7.11 Komponen Takrif

• Buat komponen folder baharu dalam direktori src untuk menyimpan komponen
• Buat komponen baharu *.vue terus dalam direktori komponen
• 7.12 Pengenalan komponen

Perkenalkan komponen ke dalam halaman "import nama komponen dari'laluan komponen'"

• 7.13 Daftar Komponen

Dalam contoh pada halaman, tambah komponen atribut

Komponen atribut ialah objek, masukkan komponen dan daftar

• 7.14 Penggunaan komponen

Dalam teg halaman, gunakan terus komponen yang diimport ""

• 7.2 Parameter lulus komponen

Ibu bapa menghantar parameter kepada anak melalui atribut

• Anak Ibu bapa melepasi parameter melalui
mencetuskan acara

menggunakan data global untuk menghantar parameter dengan memasang prototaip vue

pada

• Melalui globalData
• 7.21 Hantar data daripada ibu bapa kepada anak
  • Halaman induk kepada anak Komponen
  ul-com
  • menghantar data tatasusunan melalui nama atribut senarai
  Subkomponen menerima data melalui
props

7.22 Kanak-kanak menghantar data kepada ibu bapa
• Komponen anak menghantar data kepada komponen induk dengan mencetuskan acara
• Komponen induk menerima data dengan peristiwa mendengar

<ul-com : list="[1,2,3,4]">

props: {
list: Array
},

Menulis

• ditetapkan pada acara Klik komponen anak
• Tetapkan parameter yang diluluskan dalam kaedah

Tetapkan acara mendengar dalam induk -pertemuan anak

methods: {
    handleclick(){
    this.$emit("textchange",'来自子组件的数据');}
}

<ul-com :list="[1,2,3,4]"
@textChange="handleTextchange">

Terima parameter dalam kaedah ibu bapa
• 7.3 Data kongsi global

• Kongsi data melalui prototaip Vue (dapatkan dengan ini )
  Kongsi data melalui globalData (gunakan getapp selepas definisi)
• vuex
  Storan tempatan

Slot Komponen 7.4

Teg
• sebenarnya adalah sejenis data Jika anda ingin memindahkan teg ke sub-komponen secara dinamik, anda boleh menggunakan slot
• untuk melaksanakan ruang letak
melalui slot >

Ringkasnya, buang teg halaman induk ke halaman anak

8 >8.1 Pengenalan

Kitaran hayat rangka kerja uni-app menggabungkan kitaran hayat vue dan applet WeChat Digunakan dalam APP globalsedang dilancarkan

bermaksud apabila aplikasi bermula
• digunakan dalam halaman
onLoad
• atau onShow bermaksud apabila halaman dimuatkan dan apabila halaman dipaparkan masing-masing
adalah digunakan dalam komponen
• dilekapkanApabila komponen dipasang
• Artikel ini diterbitkan semula daripada: https://juejin.cn/post/6996561691639037983
Lagi Untuk pengetahuan berkaitan pengaturcaraan, sila lawati:
Pengenalan kepada Pengaturcaraan

! !

Atas ialah kandungan terperinci Bagaimana untuk membuat projek uni-app? Penerangan proses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!