Mari kita bincangkan tentang konsep teras applet Vue

Dalam beberapa tahun kebelakangan ini, dengan populariti Internet mudah alih dan peningkatan program mini, semakin banyak syarikat telah mula melabur dalam pembangunan program mini. Dalam pembangunan program kecil, Vue.js, sebagai rangka kerja hadapan yang ringan, diiktiraf secara meluas untuk fleksibiliti dan kemudahan pembelajarannya. Artikel ini akan memperkenalkan tetapan applet Vue untuk membantu pembangun lebih memahami konsep teras applet Vue.

1. Permulaan projek

Sebelum kita mula, kita perlu memasang Vue CLI 3, yang merupakan alat perancah yang disediakan secara rasmi oleh Vue.js untuk mencipta projek Vue dengan cepat. Masukkan arahan berikut dalam terminal untuk memasang:

npm install -g @vue/cli

Selepas pemasangan, kita boleh mencipta applet Vue melalui Vue CLI 3.

1. Buat projek

Masukkan arahan berikut dalam terminal untuk mencipta projek applet Vue baharu:

vue create my-miniapp

Selepas memasukkan arahan di atas, anda perlu Pilih ciri yang diperlukan untuk projek semasa, seperti: Babel, Router, Vuex, CSS Pra-pemproses, dll. Di sini kami memilih ciri lalai dan tekan kekunci Enter.

2. Mulakan projek

Jalankan arahan berikut dalam direktori akar projek:

npm run serve

Selepas memulakan projek, kita boleh membukanya dalam pelayar melalui http://localhost:8080 Datang ke halaman utama applet Vue.

2. Struktur direktori

Melalui langkah di atas, kami telah berjaya mencipta applet Vue. Jadi, seterusnya kita perlu memahami struktur direktori projek applet Vue.

├── awam                                                                                                                                                                                                                                                                                                                        ‐           hingga >├── src                                       … ── .browserslistrc // Fail konfigurasi keserasian penyemak imbas
├─ babel.config.js // Fail konfigurasi Babel
├── pakej. // Fail konfigurasi projek

└── README.md Konsep teras applet Vue.

Komponen


Komponen dalam applet Vue boleh dikatakan sebagai konsep yang sangat penting Ia membahagikan halaman kepada beberapa komponen bebas fungsi, menjadikan kod itu Lebih ringkas dan lebih mudah untuk diselenggara. Dalam applet Vue, setiap komponen terdiri daripada tika Vue, dan tika Vue boleh mengandungi beberapa komponen.

Kita boleh mencipta komponen baharu dalam direktori

, contohnya:

. Komponen ini boleh mengandungi
dan
ringkas:

Komponen ini

mengandungi kotak teks ringkas yang memaparkan kandungan "Hello, World!". Komponen ini mentakrifkan atribut

dalam

, iaitu

, dan menetapkan nilai lalainya kepada "Hello, World!"
1. Untuk memperkenalkan komponen ke dalam halaman, kita boleh menggunakan sintaks

dalam teg

halaman sasaran untuk memperkenalkan komponen yang baru dibuat.

src/componentsPenghalaansrc/components/HelloWorld.vuetemplatescriptDalam applet Vue, dengan memperkenalkan penghalaan, kita boleh menjadikan halaman mempunyai keupayaan untuk melompat. Applet Vue mempunyai pemalam Vue Router terbina dalam, yang menjadikan tetapan penghalaan sangat mudah.

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, World!'
    }
  }
}
</script>

Buat fail penghalaan baharu dalam direktori

, contohnya: template . Fail penghalaan mengandungi tetapan penghalaan mudah: scriptdatamsgDalam tetapan penghalaan di atas, kami menyediakan dua nod penghalaan, satu ialah

(iaitu halaman utama aplikasi), dan satu lagi ialah

. Setiap nod penghalaan perlu menetapkan atribut template, atribut <hello-world></hello-world> dan atribut

. Antaranya, atribut

mewakili alamat URL laluan, atribut
2. ialah nama laluan dan atribut
ialah nama komponen yang sepadan dengan laluan. Selain itu, kita juga boleh menetapkan kaedah lompat laluan. Dalam tetapan penghalaan di atas, kami menggunakan

untuk mendayakan mod sejarah HTML5.

在 src/views 目录下可以创建与 router 配套的视图文件，例如： src/views/Home.vue 和 src/views/About.vue 。这两个文件分别对应上面路由设置的首页和关于页面。

3. Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。状态共享是指多个组件共享同一个状态，这种设计模式使得在全局上管理应用程序的状态非常容易，从而提高代码的可维护性和代码的复用性。

在 src/store 目录下可以创建一个新的Vuex store文件，例如： `src/store/index.js'。该文件中包含一些基本的Vuex state 属性、Vuex mutations 和 Vuex actions 。

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

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  increment({ commit }) {
    commit('increment')
  },
  decrement({ commit }) {
    commit('decrement')
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

上述代码包含以下三个关键的属性：

• state：表示组件中的数据状态。
• mutations：表示一些方法，用于改变 state 中的状态。
• actions：表示一些异步方法，用于执行复杂的逻辑代码。

在代码中，我们定义了一个 count 状态，并在 mutations 中定义了一个 increment 函数和一个 decrement 函数，用于改变 count的值。我们还在 actions 中实现了操作 mutations 中函数的方法，分别是 increment 和 decrement。

四、总结

本文介绍了Vue小程序的设置，包括了项目的初始化，目录结构，以及Vue小程序的核心概念：组件、路由和Vuex。

在实际的开发中，使用Vue小程序可以显著提高开发效率，简化代码结构。希望通过本文的介绍，读者可以更好地了解Vue小程序的使用和相关知识，并在实际的开发中起到指导作用。

Atas ialah kandungan terperinci Mari kita bincangkan tentang konsep teras applet Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!