طريقة بناء بيئة تطوير Vue باستخدام vue-cli + webpack

في هذا المكان نحتاج أولاً إلى تنزيل node، لأننا سنستخدم npm لتنزيل الحزم، وهو يعتمد على node

لا نتحدث عن الكلام غير الضروري، دعونا ننتقل مباشرة إلى الموضوع

تنزيل node، في نفس الوقت تحتاج إلى تنزيل git، وسنستخدم أوامر git لإنشاء بيئتنا vue

يستخدم git أوامر Linux

لا تسأل لماذا، إذا كان يعمل فهذا يكفي، أليس كذلك؟

في نظام Windows، بعد تنزيل git نضغط بزر الماوس الأيمن على سطح المكتب ونجد git Bash، نفتحها، وبعدها تم فتح git

يحتوي git على العديد من الوظائف، ويمكنك أيضًا إرسال ملفاتك إلى github، github هو أداة إدارة مستودعات ممتازة

حسنًا، لنبدأ مباشرة، عند فتح git سيظهر

ثم ننفيذ npm install webpack

سيتم تنزيل أحدث إصدار من webpack تلقائيًا

في هذا المكان ننتقل مباشرة إلى الموضوع الرئيسي، كيفية استخدام vue-cli لإنشاء بيئة تطوير vue

في هذا المكان نحتاج إلى تثبيت vue-cli بشكل عام

في git تنفيذ npm install vue-cli -g لتثبيت بيئة أوامر vue

تنفيذ vue --version لمعرفة ما إذا تم التثبيت بنجاح

عرض إصدار Vue، مما يعني أن التثبيت قد تم بنجاح

بهذا يكون قد تم تثبيت هذا على مستوى النظام

الآن نكتب في سطر الأوامر vue init webpack-simple <اسم النموذج، وهو اسم مشروعك>،

في هذا المثال، نستخدم webpack-simple لبناء، لأنه ليس له معايير صارمة، وهو أكثر ملاءمة لمعظم المبرمجين، الفرق بينه وبين webpack لن أتفصل فيه الآن، إذا كنت بحاجة إلى ذلك، يمكنك ترك تعليق في الأسفل وسنشارككم

في هذا المثال، اسم مشروعي هو myvue

لذلك، قمت بتنفيذ vue init webpack-simple myvue

على سطح المكتب سيكون هناك مجلد myvue

نحن نقوم بتنفيذ cd myvue لنذهب إلى داخل مشروعنا

ستجد هذه الملفات في مجلد، هذا هو البيئة التي قام بإنشائها vue-cli تلقائيًا

نحن نقوم بتنفيذ npm install

في هذه اللحظة، نحتاج إلى الانتظار لفترة قصيرة، حيث يقوم npm بتحميل بعض الملفات القائمة على نود

ثم ستجد ملفًا جديدًا يُدعى node——modules، يحتوي على بعض الملفات الخاصة بنود

ثم ن�行ر على سطر الأوامر npm run dev

Vue قام بفتح المتصفح تلقائيًا وتشغيل هذا المشروع Vue

بهذا، بناء بيئة تطوير Vue باستخدام vue-cli قد تم بنجاح، إذا كان لديك أي استفسارات، فلا تتردد في ترك تعليق، وسأقوم بالرد على تعليقاتكم في الوقت المناسب. وأنا أتمنى أيضًا أن تكونوا قد ساعدتمي في دعم دليل النفخ!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر تخص المالك الأصلي، المحتوى تم إضافته من قبل مستخدمي الإنترنت بشكل تلقائي، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية مرتبطة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وتقديم الدليل، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المشبوه فوراً.