Cara membina aplikasi bahagian hadapan yang cekap dengan vue dan Element-plus

Cara membina aplikasi bahagian hadapan yang cekap melalui vue dan Element-plus

Dengan pembangunan berterusan teknologi bahagian hadapan, alatan dan rangka kerja pembinaan aplikasi bahagian hadapan moden muncul tanpa henti. Sebagai rangka kerja JavaScript yang cekap dan fleksibel, Vue.js telah menjadi pilihan pertama untuk pembangun. Element-plus ialah satu set perpustakaan komponen UI berdasarkan Vue.js Ia menyediakan banyak komponen UI siap sedia untuk membantu kami membina antara muka dengan cepat.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue.js dan Element-plus untuk membina aplikasi bahagian hadapan yang cekap. Kami akan bermula daripada cara menyediakan persekitaran pembangunan dan kemudian cara menggunakan komponen Vue dan komponen Element-plus untuk pembangunan.

1. Bina persekitaran pembangunan
   Untuk menggunakan Vue.js dan Element-plus, anda perlu memasang Node.js terlebih dahulu. Node.js ialah persekitaran berjalan sebelah pelayan berdasarkan enjin JavaScript Chrome V8, yang termasuk alat pengurusan pakej npm.

Selepas memasang Node.js, masukkan arahan berikut pada baris arahan untuk memasang Vue CLI:

npm install -g @vue/cli

Selepas pemasangan selesai, gunakan arahan berikut untuk mencipta projek Vue baharu:

vue create my-app

Kemudian pilih "Pilih secara manual ciri" dan tekan Enter. Seterusnya, tekan ruang untuk memilih fungsi seperti "Babel," "Penghala" dan "Linter."

Selepas pemasangan selesai, jalankan arahan berikut dalam direktori projek untuk memasang Element-plus:

npm install element-plus --save

2. Buat susun atur asas
   Seterusnya, kami akan membuat susun atur asas dengan bar navigasi atas dan bar sisi.

Buat susun atur folder baharu dalam direktori src dan buat fail MainLayout.vue di dalamnya. Dalam fail ini, kami akan menggunakan komponen Element-plus untuk membina reka letak:

<template>
  <div class="main-layout">
    <el-container>
      <el-header>
        <!-- 顶部导航栏 -->
      </el-header>

      <el-container>
        <el-aside>
          <!-- 侧边栏 -->
        </el-aside>

        <el-main>
          <!-- 主要内容区域 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'MainLayout',
}
</script>

<style scoped>
.main-layout {
  height: 100vh;
}
</style>

3. Buat konfigurasi penghalaan
   Seterusnya, kita perlu mencipta konfigurasi penghalaan untuk menentukan halaman aplikasi yang berbeza.

Buat penghala folder baharu dalam direktori src dan buat fail index.js di dalamnya. Dalam fail ini, kami akan menggunakan Penghala Vue untuk konfigurasi penghalaan:

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他页面的路由配置...
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

export default router

4. Buat komponen halaman
   Untuk demonstrasi, kami akan mencipta halaman Utama yang ringkas.

Buat paparan folder baharu dalam direktori src dan buat fail Home.vue di dalamnya. Dalam fail ini, kami akan membina halaman menggunakan komponen Element-plus:

<template>
  <div class="home">
    <el-card>
      <h2>Welcome to my App!</h2>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style scoped>
.home {
  margin: 20px;
}
</style>

5. Mengintegrasikan komponen dan konfigurasi penghalaan ke dalam aplikasi
   Akhir sekali, kami perlu menyepadukan komponen yang dibuat sebelum ini dan konfigurasi penghalaan ke dalam aplikasi.

Dalam fail main.js dalam direktori src, tambahkan kod berikut:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import router from './router'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

Pada ketika ini, kami telah melengkapkan aplikasi bahagian hadapan mudah yang dibina menggunakan Vue.js dan Element-plus. Anda boleh memulakan aplikasi dengan menjalankan:

npm run serve

Ringkasan:
Membina aplikasi bahagian hadapan yang cekap dengan Vue.js dan Element-plus adalah agak mudah. Kami hanya perlu menyediakan persekitaran pembangunan, mencipta reka letak asas dan komponen halaman, dan menyepadukannya ke dalam aplikasi. Pustaka komponen Element-plus menyediakan set komponen UI yang kaya, membolehkan kami membina antara muka pengguna moden dengan cepat. Saya harap artikel ini boleh membantu anda semasa membina aplikasi bahagian hadapan menggunakan Vue.js dan Element-plus.

Atas ialah kandungan terperinci Cara membina aplikasi bahagian hadapan yang cekap dengan vue dan Element-plus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!