vue2 admin

vue2-admin

عنوان الخبرة: vue2-admin
الحساب: المشرف كلمة المرور: المشرف
إذا واجهت خطأً أو كان لديك تنفيذ أفضل، فلا تتردد في الاتصال بي (يمكنك أيضًا إرسال بريد إلكتروني إليّ لسؤالك عما إذا كنت لا تفهم الكود). البريد الإلكتروني: [email protected]

عنوان جيثب لإصدار vue2: vue2-admin
يوجد أيضًا مستودع gitee، فقط قم بتغيير github في الرابط أعلاه إلى gitee.

---

يحتوي على ميزات

1. الرسوم المتحركة الأولى لتحميل الشاشة
2. حزمة اكسيوس
3. التحكم في إذن جهاز التوجيه
4. قم بإنشاء شريط التنقل الجانبي ديناميكيًا بناءً على الأذونات
5. منطق تسجيل الدخول
6. تخطيط صفحة لوحة القيادة
8. المكونات المستندة إلى التغليف الثانوي لـ el-tooltip ستعرض تلميح الأداة فقط عند تجاوز الطول، وتدعم جميع سمات el-tooltip 9. المكونات المستندة إلى التغليف الثانوي لـ el-table، تدعم جميع سمات el -الجدول ودعم الترحيل 10. مكون اختيار الأيقونة يعتمد على التغليف الثانوي لـ el-icon 11. وظيفة التحديث بدون لمس

---

قالب الخلفية vue2+element+axios

إنه لا يفرط في تغليف الوظائف ويوفر فقط إطار الصفحة الأساسي وبنية التوجيه، ويتم ترك الوظائف المتبقية بالكامل للمستخدمين لتطوير أنفسهم.

تقديم نماذج وهمية لتسهيل التطوير المنفصل للواجهة الأمامية والخلفية.

حول موكجس

ولإظهار التأثير، استخدمت أيضًا mock.js لإنشاء بيانات اختبار في البيئة الرسمية. ولكن لن يتم استخدام النسخة الرسمية!

يرجى تنفيذه بشكل متقطع أثناء الاستخدام الرسمي.

 npm uninstall mockjs --save

إذا كنت بحاجة إلى بيانات اختبار أثناء التطوير، فيرجى تنفيذ التعليمات التالية لتثبيت mockjs في بيئة التطوير

 npm install mockjs -D

---

تغليف المحاور

يمكن تكوين رؤوس الطلب في utils/request.js ويمكن تعديلها وفقًا لموقفك الفعلي.

قم بتكوين عنوان URL الأساسي للطلب في واجهة برمجة التطبيقات في utils/setting.js

البيئة العامة هي .env

بيئة التطوير هي .env.development

بيئة الإنتاج هي .env.production

أولوية متغير البيئة .env.production = .env.development > .env

يوجد مجلد API في دليل src للمشروع، ثم قم بإنشاء ملف user.js جديد فيه. هذا الملف هو عملية تغليف لكتابة واجهة برمجة التطبيقات.

يوصى بوضع نوع الواجهة في نفس الملف عند استخدامه لتسهيل تصحيح الأخطاء والإدارة الموحدة.

إذا تم استخدام تنسيق @/api/user.js، فسيتم تقديمه أولاً عند استخدامه. على سبيل المثال، قمت أولاً بتقديم الملف في @/component/login.vue

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

---

التحكم في أذونات جهاز التوجيه

قم بإنشاء مسارات ديناميكيًا استنادًا إلى البيانات التي يتم إرجاعها بواسطة الواجهة، وإنشاء شريط تنقل استنادًا إلى بيانات الواجهة.

هناك حراس للمسار في @/router/beforEach.js. تمت إضافة حراس المسار الأساسيين إذا كنت تريد تنفيذ وظائف أخرى (مثل: لا يمكنك الدخول إلا إلى صفحة معينة بعد إجراء عملية معينة)، فيمكنك إضافتها في جهاز التوجيه/beforEach.js أضف المنطق المقابل لوظيفة التنفيذ الذاتي.

يقوم النص بإنشاء التنقل الجانبي بناءً على المسار

قم بتكوين الرمز والعنوان والمخفي للشريط الجانبي في سمة التعريف في @/router/beforEach.js. عندما يكون مخفيًا: صحيح، لا يتم عرض شريط التنقل الجانبي.

يمكن تعديل لون الشريط الجانبي عن طريق جانب_اللون وجانب_ريكست_لون السمة في الأدوات/الإعدادات.

---

فويكس

ضع وحدات vuex وتسجيل الدخول والتحكم في الأذونات ضمن وحدة منفصلة

لمنع فقدان تحديث بيانات vuex، قم بتقديم vuex-persistedstate

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

من أجل منع المستخدمين من تعديل مساحة تخزين الجلسة يدويًا، تتم إضافة حدث استماع

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

---

اختناق الزر

تمت إضافة رمز التحكم الأساسي للزر، ويمكن ربط v-preventReClick بالزر.

 // 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 )
        }
      } )
    }
} ) 

---

صفحة التضمين الأولية

صفحة تسجيل الدخول,

صفحة استرجاع كلمة المرور,

404 صفحة،

الصفحة الرئيسية

---

التحضير للاستخدام

 npm uninstall mockjs --save

npm install mockjs -D

npm install

ابدأ مشروعًا

 npm run serve

تغليف المشروع

 npm run build

تنسيق الكود

 npm run lint

عامل ميناء

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