Cara menggunakan Vue dan Element-UI untuk membangunkan bahagian belakang pengurusan yang kaya ciri dengan cepat

Cara menggunakan Vue dan Element-UI untuk membangunkan bahagian belakang pengurusan yang kaya dengan ciri

Bahagian belakang pengurusan ialah bahagian penting dalam banyak produk Internet. Ia boleh membantu pentadbir mengurus, memantau dan mengendalikan sistem. Sebagai rangka kerja JavaScript yang popular, Vue digunakan secara meluas dalam pembangunan bahagian hadapan kerana kesederhanaan dan kecekapannya. Element-UI, sebagai satu set perpustakaan komponen berdasarkan Vue, menyediakan set komponen UI yang kaya dan boleh membangunkan bahagian belakang pengurusan yang kaya dengan ciri dengan cepat.

Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk membina bahagian belakang pengurusan dengan cepat dan memberikan beberapa contoh kod.

Pertama, kita perlu memasang Vue dan Element-UI dalam projek. Anda boleh menggunakan arahan npm untuk memasang:

npm install vue
npm install element-ui

Seterusnya, kami boleh mencipta projek Vue baharu dan memperkenalkan Element-UI:

// main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
    el: '#app',
    render: h => h(App)
})

Dalam kod di atas, kami memperkenalkan Vue dan Element-UI, dan lulus penggunaan Vue(). kaedah untuk menggunakan Element-UI. Pada masa yang sama, kami juga memperkenalkan gaya Elemen-UI.

Seterusnya, kita boleh menggunakan komponen kaya yang disediakan oleh Element-UI untuk membina bahagian belakang pengurusan dalam halaman.

<!-- App.vue -->

<template>
  <div class="app">
    <el-container>
      <el-aside width="200px">
        <!-- 左侧菜单 -->
        <el-menu>
          <el-menu-item index="1">
            <i class="el-icon-lollipop"></i>
            <span>菜单一</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-cake"></i>
            <span>菜单二</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 头部 -->
        </el-header>
        <el-main>
          <!-- 内容区域 -->
          <router-view></router-view>
        </el-main>
        <el-footer>
          <!-- 页脚 -->
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

Dalam kod di atas, kami menggunakan el-container, el-aside, el-menu dan komponen lain Element-UI untuk membina reka letak halaman latar belakang pengurusan biasa. Kita boleh menambah lebih banyak komponen dan fungsi berdasarkan keperluan khusus.

Selain komponen susun atur, Element-UI juga menyediakan banyak komponen biasa, seperti butang, jadual, borang, tetingkap timbul, dsb., yang boleh mempercepatkan pembangunan kami.

<!-- Example.vue -->

<template>
  <div>
    <el-button type="primary">点击我</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-form :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <span>这是一个弹窗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ],
      form: {
        name: '',
        age: ''
      },
      dialogVisible: false
    }
  }
}
</script>

Dalam kod di atas, kami menunjukkan penggunaan komponen el-button, el-table, el-form dan el-dialog Element-UI. Komponen ini boleh melaksanakan fungsi dengan cepat seperti klik butang, paparan jadual, input borang dan tetingkap timbul.

Melalui contoh di atas, kita dapat melihat bahawa menggunakan Vue dan Element-UI boleh membina bahagian belakang pengurusan yang kaya dengan ciri dengan cepat. Selain menyediakan set komponen yang kaya, Element-UI juga sangat disesuaikan, membolehkan kami menjalankan pembangunan diperibadikan mengikut keperluan khusus.

Saya harap artikel ini dapat membantu pembaca menggunakan Vue dan Element-UI dengan lebih baik untuk membangunkan bahagian belakang pengurusan yang kaya dengan ciri dengan cepat. Semoga berjaya dengan pembangunan projek anda!

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk membangunkan bahagian belakang pengurusan yang kaya ciri dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!