vue2 admin

vue2-admin

Alamat pengalaman: vue2-admin
Akun: admin Kata sandi: admin
Jika Anda menemukan bug atau memiliki implementasi yang lebih baik, jangan ragu untuk menghubungi saya (Anda juga dapat mengirimi saya email untuk menanyakan apakah Anda tidak memahami kodenya). Surel: [email protected]

alamat github versi vue2: vue2-admin
Gudang gitee juga ada, tinggal ganti github pada link diatas menjadi gitee.

---

Berisi fitur

1. Animasi pemuatan layar pertama
2.paket aksios
3.kontrol izin router
4. Menghasilkan bilah navigasi samping secara dinamis berdasarkan izin
5. Logika masuk
6. tata letak halaman dasbor
8. Komponen berdasarkan enkapsulasi sekunder el-tooltip hanya akan menampilkan tooltip ketika panjangnya terlampaui, dan mendukung semua atribut el-tooltip. 9. Komponen berdasarkan enkapsulasi sekunder el-tabel, mendukung semua atribut el -tabel, dan mendukung paging. 10. Komponen pemilihan ikon berdasarkan enkapsulasi sekunder el-icon 11. Fungsi penyegaran tanpa sentuhan token

---

templat latar belakang vue2+elemen+aksios

Itu tidak merangkum fungsi secara berlebihan dan hanya menyediakan kerangka halaman dasar dan struktur perutean. Fungsi lainnya sepenuhnya diserahkan kepada pengguna untuk dikembangkan sendiri.

Perkenalkan tiruan untuk memfasilitasi pengembangan front-end dan back-end secara terpisah.

Tentang mockjs

Untuk mendemonstrasikan efeknya, saya juga menggunakan mock.js untuk menghasilkan data pengujian di lingkungan formal. Namun versi resminya tidak akan digunakan!

Silakan jalankan di sela-sela penggunaan resmi.

 npm uninstall mockjs --save

Jika Anda memerlukan data pengujian selama pengembangan, silakan jalankan instruksi berikut untuk menginstal mockjs di lingkungan pengembangan

 npm install mockjs -D

---

Rangkum aksio

Header permintaan dapat dikonfigurasi di utils/request.js dan dapat dimodifikasi sesuai dengan situasi Anda yang sebenarnya.

Konfigurasikan URL dasar permintaan di api di utils/setting.js

Lingkungan umumnya adalah .env

Lingkungan pengembangannya adalah .env.development

Lingkungan produksi adalah .env.production

Prioritas variabel lingkungan .env.production = .env.development > .env

Ada folder api di direktori project src, lalu buat file user.js baru di dalamnya.

Disarankan untuk meletakkan jenis antarmuka dalam file yang sama saat menggunakannya untuk memfasilitasi debugging dan manajemen terpadu.

Jika format @/api/user.js yang digunakan akan diperkenalkan terlebih dahulu saat menggunakannya. Misalnya, saya pertama kali memperkenalkan file di @/component/login.vue

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
} 

---

kontrol izin router

Buat rute secara dinamis berdasarkan data yang dikembalikan oleh antarmuka, dan buat bilah navigasi berdasarkan data antarmuka.

Ada penjaga rute di @/router/beforEach.js. Penjaga rute dasar telah ditambahkan. Jika Anda ingin mengimplementasikan fungsi lain (seperti: Anda hanya dapat memasuki halaman tertentu setelah melakukan operasi tertentu), Anda dapat menambahkannya di router/beforEach.js Tambahkan logika yang sesuai ke fungsi Selfexecution.

Teks menghasilkan navigasi samping berdasarkan rute

Konfigurasikan ikon, judul, dan sidebar tersembunyi di atribut meta di @/router/beforEach.js. Jika disembunyikan: benar, bilah navigasi samping tidak ditampilkan.

Warna sidebar dapat dimodifikasi dengan side_color dan side_rext_color tema di utils/setting.

---

VUEX

Letakkan modularisasi vuex, login dan kontrol izin di bawah modul terpisah

Untuk mencegah hilangnya penyegaran data vuex, perkenalkan vuex-persistedstate

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

Untuk mencegah pengguna mengubah penyimpanan sesi secara manual, acara mendengarkan ditambahkan

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 

---

pelambatan tombol

Kode pembatasan tombol dasar telah ditambahkan, dan v-preventReClick dapat diikat ke tombol.

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} ) 

---

halaman penyertaan awal

halaman masuk,

Halaman pengambilan kata sandi,

404 halaman,

Halaman rumah

---

Persiapan untuk digunakan

 npm uninstall mockjs --save

npm install mockjs -D

npm install

Mulai sebuah proyek

 npm run serve

Pengemasan proyek

 npm run build

Pemformatan kode

 npm run lint

buruh pelabuhan

 docker build -t vue-admin . --no-cache