Vue template web

Vue-template-web هو قالب بسيط للصفحة الرئيسية يستخدم vue element-ui

مقدمة:

هذا المشروع عبارة عن صفحة قالب بسيطة وبنية أساسية يمكن تحويلها بسهولة إلى بعض الصفحات الترويجية وصفحات السمات وصفحات الموقع الرسمية وما إلى ذلك.

تنفيذ المشروع:

1. صفحة ربط التمرير ذات الاتجاهين.
2. دعم تدويل i8n لعنصر vue-ui.
3. تعديل سمة لون الموضوع.
4. يقوم Vuex باستمرار بتخزين السمة واللغة المحددة للمستخدم مؤقتًا.
5. استخدم مكتبة أيقونات الخط iconfont.
6. يلخص طلب axios.

هيكل المشروع:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

تقديم:

كيفية التشغيل:

- .استنساخ المشروع ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. قم بتشغيل npm install لتنزيل التبعيات (إذا كان التنزيل بطيئًا: npm install --registry=https://registry.npm.taobao.org ).

-. قم بتشغيل npm run serve لبدء المشروع، وقم بزيارة http://localhost:8080 لتصفح الصفحة.

-.Run npm run build لتجميع المشروع وتعبئته.

يلاحظ:

1. يستخدم الفرع الجديد Vue-template-web-cdn CDN لتحميل بعض التبعيات، مما يمنع ملف js من أن يكون كبيرًا جدًا بعد التعبئة ويستغرق تحميل الشاشة الأولى وقتًا طويلاً.

تم اختباره:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

لذلك يوصى باستخدام فرع Vue-template-web-cdn؛

2. بعد تحسين التمرير باستخدام نقطة الربط window.scrollTo(options)، انتبه إلى توافق المتصفح: window.scrollTo متوافق بالطبع، يمكنك اختيار إصدار التقديم السابق ليكون متوافقًا مع المتصفحات الأخرى؛

تَلمِيح:

1. ينفذ المشروع تدويل vue element-ui i8n ويحدد التبديل بين الصينية والإنجليزية مجموعتين من اللغات، والتي تم تعريفها ضمن i18n/langs/.

2. تنفيذ تغيير الموضوع:

في السابق، تم تنفيذه بالرجوع إلى حالة تغيير الجلد الرسمية، ويمكن تغيير اللون مع مكونات ElementUI نظرًا لأن هذه الطريقة أكثر تعقيدًا وقد تسبب أخطاء غير معروفة، فإننا نستخدم حاليًا حفظ قيمة اللون مباشرةً لتغيير السمة ، وقم بتمرير this.$ في المشروع. يمكن لـ store.state.theme الحصول على قيمة لون السمة.
(يوصى به أكثر: يمكنك استخدام متغيرات css var للربط بالعنصر الجذر لتغيير النمط).

3. يشير تمرير مرساة الصفحة إلى هذا المشروع مفتوح المصدر.

4. يقوم المشروع بتغليف طلب axios وربط السمة العامة $globalRequest. يمكنك استدعاء طريقة الطلب غير المتزامنة test4() على أي صفحة من خلال انتظار this.$globalRequest.test4(arg);

5. إذا وجد المشروع مجالات يمكن تحسينها، فنحن نرحب بإثارة مسألة للتحسين.