tm nuxtjs starter
1.0.0
هذا هو الحد الأدنى من طقم بداية VUE وتطبيق العرض التجريبي اعتبارًا من أغسطس 2018.
إذا كنت تشعر بالتعب من التعب JavaScript ، وترغب في البدء بسرعة وسهولة ، ألق نظرة خاطفة على هذا. تطوير تطبيق VUE الحديث لا يصبح أكثر بساطة من هذا.
التطبيق التجريبي هو موقع ثابت ، وهو عبارة عن تطبيق أساسي واحد يحتوي على عدد قليل من الصفحات القابلة للعنونة التي يتم تحميلها على الطلب. إنه يوضح عمليات CRUD الأساسية: 1) قائمة الأفلام ، 2) عرض تفاصيل الفيلم ، 3) إنشاء/تحرير و 4) حذف فيلم.
يستخدم العرض التوضيحي متصفح LocalStorage لتخزين البيانات ، مما يعني أنه يعمل بدون واجهات خلفية. تحتوي المصادر على وحدة نمطية تقوم بإجراء مكالمات حقيقية Ajax إلى الواجهة الخلفية للراحة - تحتاج فقط إلى تمكين الوحدة النمطية وكتابة خادم ، وأنت في مسار جيد للحصول على تطبيق ويب حقيقي. لقد قمت بتطوير خادم RESTPIE3 Python Rest API الذي ينفذ واجهة برمجة تطبيقات الفيلم البسيطة هذا كمثال.
يتكون التطبيق التجريبي من مكدس تقني بسيط ولكنه قوي يوفر الوظائف الأساسية لإنشاء تطبيقات الويب الحديثة. إنه يقف على أكتاف بعض المكتبات الرائعة:
├── /assets/ # assets to be processed by Nuxt
│ └── /layout.sass # main layout of site
├── /components/ # vue components used by pages
│ └── /myheader.vue # site header component
├── /layouts/ # page top-level layouts
│ └── /default.vue # main site layout
├── /pages/ # pages
│ ├── /about.vue # about page
│ ├── /index.vue # home page, lists movies
│ ├── /moviedetails.vue # details page, views a movie
│ └── /movieedit.vue # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /store/ # data stores managed by Vuex
│ └── /index.js # the single store for this app
├── config.js # app config, select ajax or localstorage
├── nuxt.config.js # nuxtjs config
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
└── serverapi_localstorage.js # API, talks to localStorage
إليك كيفية تشغيل المبتدئ في جهازك المحلي:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devثم قم بإشارة متصفحك إلى http: // localhost: 3000.
عندما يتم تعديل أي من الملفات التابعة ، يتم تحميل التغييرات الساخنة وتصبح مرئية على الفور. استمتع بـ Dev!
NUXTJS هو إطار صغير رائع يجلب بنية ووظائف السبا الأساسية للتطبيقات المستندة إلى VUE. يجعل من السهل بدء تطوير التطبيق ، مما يتيح لك التركيز على تطبيقك الأساسي ، ولكنه يوفر أيضًا ممارسات لإرشادك في إنشاء تطبيق أكثر تعقيدًا.
فوائد nuxt.js باختصار:
يستفيد Nuxt.js من مكونات الملف الفردي لـ Vue وهو حل عملي ممتاز لتغليف القالب والمنطق وتصميم مكون VUE معًا في نفس الملف المصدر.
Nuxt.js مستوحى مباشرة من NextJs وهو نفس الإطار للنظام الإيكولوجي React. يقدم Nuxt.js المزيد من التسلسل الهرمي ، حيث يحتوي على مجلدات للتخطيطات والمكونات الإضافية والأدوات الوسيطة.
نظرًا لأن NUXTJS لديها الأدوات لدعم تطوير تطبيق مع الكثير من البيانات والرمز ، يحتاج المرء عادةً إلى نوع من حل إدارة الحالة لمشاركة البيانات عبر الصفحات والمكونات.
يتكامل NUXTJS أصلاً مع مكتبة إدارة ولاية Vuex. هذه مكتبة مصنوعة جيدًا تم تأليفها من قبل إيفان ، وهو نفس الرجل الموهوب الذي أنشأ Vue. Vuex بسيط بما يكفي للتعلم بسرعة. أنت تقوم ببناء متجرك من بيانات الحالة ، ووظائف الطفرات ووظائف العمل.
لتنشيط Vuex ، يمكنك فقط إسقاط مكون المتجر في المتجر/ المجلد ، حيث يقوم Nuxt بتقاطه منه ويجعله متاحًا مثل this.$store في جميع مكونات صفحة Vue. هذا كل شيء ، لا يوجد أي تكوين آخر مطلوب.
من الممكن أيضًا استخدام مكتبات حكومية أخرى مثل MOBX ولكن بسبب التكامل المدمج ، يعد Vuex خيارًا طبيعيًا مع NUXTJS.
تعد القدرة على إنشاء موقع ثابت باستخدام NUXTJS أداة مهمة تجعل من الممكن تشغيل التطبيقات بدون خادم خلفي. يمكنك تصدير الموقع إلى صفحات github أو NetLify أو Amazon S3. (لكن تحقق من عدد قليل من gotchas مع بادرات Site+Link مع صفحات GitHub.)
هناك فوز آخر في الجيل الثابت هو أن تكون قادرًا على توصيل التطبيق مع أي راحة خلفية بغض النظر عن لغة الواجهة الخلفية. يوفر الفصل النظيف للواجهة الأمامية والخلفية أيضًا تعديلًا على مستوى التكنولوجيا وربما على مستوى الفريق.
لإنشاء موقع ثابت ، ما عليك سوى التشغيل
$ npm run export وسيتم إنشاء الملفات الثابتة في dist -folder.
لاختبار الموقع الثابت محليًا عبر خادم WWW المحلي ، قمت بسرعة بتشغيل نص Python: (Python3 -M http.server)
$ npm run pyserveثم اختبر الموقع على http: // localhost: 8000.
يعمل NUXTJS بشكل جيد ، حيث يولد صفحة رئيسية لا يتجاوز حجمها حوالي 69 كيلو بايت ومجهزة . هذه نتيجة جيدة خارج الصندوق.
يقوم المتصفح بتحميل الصفحة الرئيسية مع ما مجموعه 4 طلبات ، وكل صفحة جديدة يتم تحميلها عند الطلب تقدم طلب JS واحد مرة واحدة .
Page Size Inspector Report
URL: https://nuxtjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________4____68,802
Document________________________________________1_______960
-nuxtjs.tomicloud.com/ 960
Script__________________________________________3____67,842
-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735 53,552
-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea 13,680
-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c 610(تقرير من مفتش حجم صفحة تمديد الكروم الخاص بي.)
يعد كل من Vue و React خيارات جيدة حقًا لـ Modern Web Dev: فهي تستند إلى مفهوم DOM التفاعلي/الظاهري الحديث ، وهي خفيفة الوزن وتحظى بشعبية كبيرة مع النظم الإيكولوجية الكبيرة. لا يمكن للمطور دائمًا الاختيار بين هذين الاثنين ، ولكن إذا كان بإمكان المرء ذلك ، في النهاية ، قد يكون ذلك مسألة ذوق يعتبره المطور أفضل. عادةً ما يتعلق قرار الذوق بفلسفة ما إذا كنت تحب JSX أو القوالب.
إذا كان بإمكاني اختيار سلاحي لمشروع في الواجهة الأمامية ، فسوف أختار Vue. السبب الرئيسي بالنسبة لي هو قابلية قراءة الكود والإنتاجية الشخصية. يمكنني قراءة وكتابة قوالب HTML مع JavaScript جانبا بسهولة أكبر من JSX. يمكن أن تكون تشغيل JSX الطويلة مذهلة وصاخبة إلى حد ما. قالب مزين ببضع توجيهات فقط أكثر قابلية للقراءة بالنسبة لي. أحب أن أرى لبنات بناء HTML أولاً في الخط ، وليس خريطة JSX ()-وظائف أو مشغلي ثلاثي أو دراجات قصيرة. أفترض أن القوالب تشعر بأنها أكثر طبيعية بالنسبة لي بسبب تاريخي في العمل مع لبنات البناء الابتدائية الثلاثة على شبكة الإنترنت ، HTML ، JS ، و CSS ، قبل وقت طويل من تولي جافا سكريبت أوفرورد على العالم.
إنني أقدر بشدة فصل 3 مخاوف تمارس في مكونات ملف VUE. أظن أنني أمثل التفكير في المدرسة القديمة التي تقول إن المنظر والمنطق والتصميم يجب أن يكون لهما بعض الفصل بينهما ويجب عدم خلطه بالكامل. لديهم اقتران بينهما ، وهذا أمر طبيعي ، ويجب أن يكونوا يقعون بالقرب من بعضهم البعض ، ويفضل أن يكون ذلك في نفس الملف المصدر ، ولكن ليس متداخلة. اقتران ضيق جدا قد ينتهي في السباغيتي.
ومع ذلك ، أفهم أيضًا الآراء المتعارضة التي تنص على أن التفاعل أفضل على Vue ، والتي تجادل بأن قالب آخر DSL هو النهج الأضعف. إذا أتيت من خلفية JavaScript ، فقد تشعر React بأنها أكثر طبيعية بالنسبة لك. يمكنني العمل مع كلا الخيارين (حتى أنني صنعت هاتين المبتدئين هذه!) ولكن ربما يكون Vue لديه ميزة طفيفة بالنسبة لي.
إذا كنت ترغب في قراءة أحد مناقشات Vue Vue Vue vs اللائقة ، تحقق من خيط Reddit هذا.
المضي قدما وخذ هذا Vue Starter وربما خادم API RestPie3 Python Rest أيضًا وإنشاء خدمتك الرائعة.
يمكنك أيضًا الاتصال بي للسؤال عما إذا كنت متاحًا للعمل الحر.
إذا كنت تفضل الرد فوق Vue ، فقد قمت أيضًا بترميز هذا المبتدئ نفسه مع Reactjs JextJs.
رخصة معهد ماساتشوستس للتكنولوجيا
