Bagaimana untuk membina bahagian belakang dengan vue-cil

Dalam pembangunan web, adalah perkara biasa untuk membina sistem pengurusan bahagian belakang dipacu data. Menggunakan Vue.js dan vue-cli untuk membina sistem pengurusan bahagian belakang boleh meningkatkan kecekapan pembangunan dan memastikan kebolehselenggaraan dan kebolehskalaan kod. Artikel ini akan memperkenalkan beberapa langkah untuk mencipta sistem pengurusan bahagian belakang berdasarkan vue-cli.

Langkah 1: Pasang Node.js

Mula-mula, kita perlu memasang Node.js. Muat turun dan pasang versi terkini Node.js untuk sistem pengendalian anda di https://nodejs.org. Selepas pemasangan selesai, anda boleh memasukkan arahan berikut dalam antara muka baris arahan untuk menyemak sama ada Node.js berjaya dipasang:

node -v

Jika pemasangan berjaya, nombor versi Node.js anda akan dipaparkan.

Langkah 2: Buat projek vue-cli

vue-cli ialah alat baris arahan yang disediakan secara rasmi oleh Vue.js untuk mencipta projek Vue.js dengan cepat. Untuk memasang vue-cli, gunakan arahan berikut:

npm install -g vue-cli

Selepas pemasangan selesai, gunakan arahan berikut untuk mencipta projek asas Vue.js:

vue init webpack my-project

di mana projek saya adalah anda nama projek. Perintah ini akan menggesa anda untuk mengkonfigurasi beberapa pilihan seperti nama projek, penerangan, pengarang, dll. Anda boleh memilih untuk menggunakan nilai lalai atau mengkonfigurasinya untuk memenuhi keperluan anda. Selepas melaksanakan arahan ini, vue-cli akan menjana struktur direktori asas projek secara automatik.

Langkah 3: Pasang kebergantungan berkaitan

Kami perlu menggunakan beberapa kebergantungan untuk membantu kami membina sistem pengurusan belakang terdorong data dengan cepat. Berikut adalah beberapa kebergantungan asas, anda boleh menambah kebergantungan lain mengikut keperluan anda:

npm install --save vue vue-router vuex
npm install --save-dev element-ui

Antaranya, vue ialah kebergantungan asas, vue-router dan vuex digunakan untuk membuat penghalaan dan mengurus status, elemen-ui ialah perisian berdasarkan perpustakaan komponen UI Vue.js menyediakan banyak komponen dan gaya praktikal.

Langkah 4: Buat halaman

Sekarang, kita boleh mula mencipta halaman. Cipta komponen fail tunggal Vue yang berakhir dengan .vue dalam direktori src/views Setiap komponen harus mewakili halaman. Sebagai contoh, kita boleh mencipta komponen yang dipanggil Papan Pemuka untuk memaparkan maklumat gambaran keseluruhan sistem. Dalam fail Dashboard.vue, anda boleh menambah kod berikut:

<template>
  <div>
    <h1 id="Dashboard">Dashboard</h1>
    <p>Welcome to the Dashboard page</p>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
p {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
</style>

Kod di atas mentakrifkan komponen yang dipanggil Dashboard, yang mengandungi tajuk halaman dan beberapa teks deskriptif. Ambil perhatian bahawa gaya adalah berskop, yang bermaksud hanya komponen boleh menggunakannya.

Memandangkan kami akan menggunakan vue-router untuk mengurus penghalaan halaman, kami juga perlu menambah laluan dalam fail src/router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

Dalam kod di atas, kami akan / Laluan dipetakan ke dalam komponen Papan Pemuka.

Langkah 5: Buat reka letak

Sistem pengurusan belakang biasanya mengandungi beberapa komponen reka letak dikongsi, seperti pengepala, bar sisi dan pengaki. Mencipta komponen reka letak ini bukan sahaja mengurangkan kod pendua tetapi juga membenarkan berbilang halaman berkongsi reka letak yang sama. Buat komponen bernama Default.vue dalam direktori src/layout untuk mewakili susun atur lalai.

Komponen Default.vue harus mengandungi kandungan berikut:

<template>
  <div>
    <header></header>
    <div class="wrapper">
      <aside></aside>
      <main>
        <router-view></router-view>
      </main>
    </div>
    <footer></footer>
  </div>
</template>

<script>
export default {
  name: 'Default'
}
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main {
  flex-basis: 60%;
}
@media (max-width: 767px) {
  .wrapper {
    display: block;
  }
  main {
    flex-basis: 100%;
  }
}
</style>

Komponen Default.vue mentakrifkan struktur HTML reka letak dan menggunakan komponen paparan penghala di dalam teg utama untuk memudahkan halaman bertukar secara automatik. Selain itu, kami menggunakan beberapa gaya CSS untuk menentukan reka letak responsif halaman.

Perkenalkan komponen Default.vue ke dalam komponen App.vue, seperti yang ditunjukkan di bawah:

<template>
  <div id="app">
    <default-layout></default-layout>
  </div>
</template>

<script>
import DefaultLayout from '@/layout/Default'

export default {
  name: 'App',
  components: {
    DefaultLayout
  }
}
</script>

Kemudian, kita perlu mengubah suai fail src/main.js untuk memastikan bahawa Vue.js instance menggunakan Penghalaan dan Tata Letak kami:

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Langkah 6: Uji Aplikasi

Akhir sekali, jalankan arahan berikut untuk memulakan projek:

npm run dev

Arahan ini akan memulakan pembangunan pelayan dan lancarkan aplikasi dalam pelayar Tunjukkan aplikasi. Jika semuanya baik-baik saja, anda sepatutnya dapat melihat halaman Papan Pemuka.

Ringkasan

Menggunakan vue-cli untuk membina sistem pengurusan bahagian belakang ialah cara pantas untuk membina penyelesaian terdorong data. Selepas projek dibuat, tambahkan kebergantungan dan halaman yang diperlukan untuk meningkatkan fungsi sistem secara beransur-ansur. Dalam artikel ini, anda mempelajari beberapa langkah yang diperlukan untuk mencipta sistem pengurusan bahagian belakang asas. Semoga berjaya dengan perkembangan anda!

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