iTaster admin template

فِهرِس

• تعميم
• ثَبَّتَ
• يستخدم
• تجديد
• إعدادات
• بنيان
• القضايا المعروفة
• رخصة

تعميم

تم تعديل المشرف بناءً على قالب Webpack4.x الخاص بـ vue-cli، يرجى عدم تنزيله. لا يحتوي الكود الأولي على أي وظائف، فهو مخصص للمتعة والممارسة فقط.

تحديث التعليمات

• 2018/6/19 قم بترقية حزمة الويب واستخدم webpack4 والتوصية بالمكون الإضافي الجديد mini-css-extract-plugin

ثَبَّتَ

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

افتراضيًا، يتم فتح http://localhost:1988/ تلقائيًا.

يستخدم

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

تجديد

لضمان التحديثات اللاحقة لوحدات المشروع

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

سيقوم الأمر npm outdated بفحص الوحدات المثبتة لديك ويخبرك بالوحدات القديمة.

تتضمن المعلومات المحددة: الإصدار المثبت حاليًا (الحالي)، والإصدار الذي يجب التحديث إليه (مطلوب)، وأحدث إصدار في المستودع (الأحدث).

إعدادات

1. إذا كنت تريد تحميل مجلد dist ، فما عليك سوى حذف /dist في تكوين الملف الذي تم تجاهله (ملف .gitignore ).

2. افتراضيًا، سيتم تخزين ملفات الموارد التي تم تجميعها ومعالجتها بواسطة webpack في المجلد static . إذا كنت تريد تخزينها فقط في دليل الملف الجذر، فقم بتعديل معلمة build.assetsSubDirectory ضمن config/index.jx لتركها فارغة. ولكن لا ينصح! بهذه الطريقة، ستكون بعض مسارات الصور خاطئة عند التعبئة. يوصى بوضع الموارد التي يقل حجمها عن 10 كيلو بايت وبعض أيقونات svg (الأشياء التي لن يتم تغييرها بشكل عام) في المجلد src/assets ، ويتم وضع البعض الآخر في static المجلد.

3. افتراضيًا، تحتوي ملفات css/js المعبأة على source map ، وهي مفيدة جدًا لتصحيح أخطاء التعليمات البرمجية في بيئة التطوير، ومع ذلك، لا يوصى بذلك في بيئة التجميع والإنتاج، قم بتعديل ملف config/index.js وتغيير القيمة من build.productionSourceMap إلى: false .

4. إذا كان الكود يعمل على الخادم ولا تريد أن يكون لديك #/ في شريط العناوين، فستحتاج إلى حذف التعليق mode: 'history' في router/index.js (يلزم أيضًا تكوين الواجهة الخلفية، وإلا فإن الصفحة سيتم تحديث 404)؛ إذا كانت الصفحة بحاجة إلى استخدام قفزات الارتساء، فانتقل إلى الموقع المحدد واحذف التعليق scrollBehavior .

5. لأنه يأتي مع المكون الإضافي autoprefixer ، فإن كتابة كود CSS مباشرة في ملف vue سيضيف البادئة تلقائيًا.

بنيان

يوصى باستخدام بنية الدليل التالية في التطوير الكبير للصفحة الواحدة:

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

ميزة:

• إذا كنت تريد استخدام /login في مشروع آخر، فما عليك سوى نسخه أو نقله إلى دليل /components.

• طالما قمت بتثبيت أي تبعيات خارجية وقمت بتحديد نفس المُحمل في التكوين، فمن المفترض أن يعمل المشروع بشكل جيد.

القضايا المعروفة

• هناك خطأ في إخفاء الشريط الجانبي الأيسر

يساهم

يمكنك المساهمة بحرية في هذا المشروع عن طريق إرسال المشكلات و/أو سحب الطلبات. تم اختبار هذا المشروع، لذا يرجى تذكر أن كل تغيير وميزة جديدة يجب أن تخضع للاختبارات

رخصة

هذا المشروع مرخص من قبل معهد ماساتشوستس للتكنولوجيا.