Bagaimana untuk membina vue projek bahagian hadapan

Memandangkan trend pemisahan bahagian hadapan dan belakang menjadi semakin jelas, semakin banyak rangka kerja bahagian hadapan. Antaranya, Vue.js ialah rangka kerja yang agak ringkas dan mudah digunakan, dan dialu-alukan oleh ramai jurutera hadapan. Dalam artikel ini, kami akan memperkenalkan cara membina projek bahagian hadapan menggunakan Vue.js.

1 Cipta projek

Gunakan Vue CLI untuk membuat projek Vue dengan cepat. Vue CLI ialah alat baris arahan yang boleh membantu kami membina struktur projek Vue.js dengan cepat. Kita boleh mencipta projek Vue baharu dengan menjalankan arahan berikut:

vue create my-project

dan kemudian konfigurasikan projek mengikut pilihan. Antaranya, kita perlu memilih pemalam dan konfigurasi berkaitan yang perlu diperkenalkan. Sebagai contoh, kami akan ditanya pemalam yang perlu kami pasang, seperti penghala (vue-router), vuex (pengurus negeri), prapemproses CSS, dsb. Setelah dikonfigurasikan, Vue CLI akan membuat struktur projek secara automatik berdasarkan pilihan kami.

2. Menulis komponen

Idea teras Vue.js ialah idea pengkomponenan, dan semuanya berkomponen. Oleh itu, kita perlu menulis komponen untuk membina projek Vue. Komponen ialah blok kod boleh guna semula, yang sangat mengurangkan lebihan kod dan meningkatkan kebolehgunaan semula kod.

Kita boleh mencipta komponen di bawah folder /src/components, contohnya, mencipta komponen HelloWorld.vue.

<template>
  <div>
    <p>{{msg}}</p>
    <input v-model="text">
    <p>{{text}}</p>
    <button @click="onClick">点击</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'hello world',
        text: ''
      }
    },
    methods: {
      onClick() {
        alert('clicked')
      }
    }
  }
</script>

Ini adalah komponen Vue.js yang sangat mudah Templat menggunakan sintaks templat, termasuk ungkapan interpolasi, arahan, dsb., dan juga termasuk kod JavaScript yang sepadan.

3. Gunakan komponen

Secara terang-terangan, komponen ialah tika Vue ini boleh "digunakan" dalam templat kejadian Vue yang lain. Dalam Vue, kita boleh menggunakan komponen ini melalui tag <template>.

Anda boleh memperkenalkan komponen HelloWorld yang baru kami cipta dalam App.vue.

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
</script>

Dalam kod di atas, kita perlu memperkenalkan komponen terlebih dahulu dan menggunakan komponen ini dalam templat.

4. Pengurusan keadaan Vuex

Vuex ialah perpustakaan yang digunakan khas untuk mengurus keadaan (data) dalam aplikasi Vue.js. Dalam projek yang lebih kompleks, jika terdapat terlalu banyak negeri, pengurusan akan menjadi sangat menyusahkan. Menggunakan Vuex untuk mengurus keadaan membolehkan kami mengekalkan keadaan ini dengan lebih baik dan berkongsinya antara komponen yang berbeza.

Kami perlu memasang Vuex dalam projek:

npm install vuex --save

Seterusnya buat fail store.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({commit}) {
      commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

Ini ialah kedai Vuex yang ringkas (status ) , termasuk keadaan, mutasi, tindakan dan pengambil, yang masing-masing sepadan dengan storan data, pengubahsuaian data, operasi tak segerak, pemerolehan data dan operasi lain.

Selepas mencipta fail store.js, kita perlu menyuntiknya ke dalam contoh Vue:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

Pada masa ini, kita boleh mengakses keadaan dalam Vuex dalam komponen.

5. Gunakan penghalaan

Dalam Vue.js, kita boleh menggunakan vue-router untuk mengurus penghalaan. Kita boleh mencipta fail /src/router di bawah folder index.js untuk menguruskan penghalaan.

Kita perlu memasang vue-router dalam projek:

npm install vue-router --save

Seterusnya tulis laluan:

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

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

Kemudian perkenalkan laluan di atas ke dalam contoh Vue :

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Dengan cara ini, kita boleh menggunakan penghalaan dalam projek.

6. Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue.js untuk membina projek hadapan dengan cepat. Langkah-langkah seperti mencipta struktur projek, menulis komponen, menggunakan Vuex untuk mengurus status, dan menggunakan vue-router untuk mengurus penghalaan melalui Vue CLI menyediakan pemula proses yang agak jelas untuk membina projek. Sudah tentu, ini hanyalah pengenalan kepada Vue.js Dalam pembangunan projek sebenar, masih banyak pengetahuan dan kemahiran yang perlu dikuasai. Saya harap artikel ini dapat membantu anda bermula dengan Vue.js, dan saya harap artikel ini dapat membantu anda memahami Vue.js dengan lebih mendalam.

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