مشكلة في إنشاء مشروع vue/cli

Hadi255 · 13 يناير 2023

بعد تحميل vue/cli حاولت إنشاء مشروع جديد فظهرت لي هذه الرسالة أثناء التحميل :

72 packages are looking for funding
  run `npm fund` for details
�  Invoking generators...
�  Installing additional dependencies...

npm ERR! Invalid Version:

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hp\AppData\Local\npm-cache\_logs\2023-01-13T18_15_37_398Z-debug-0.log
 ERROR  Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
    at ChildProcess.<anonymous> (C:\Users\hp\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\executeCommand.js:138:16)
    at ChildProcess.emit (node:events:513:28)
    at cp.emit (C:\Users\hp\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1091:16)
    at ChildProcess._handle.onexit (node:internal/child_process:302:5)

علماً أنني قبله مباشرة حملت آخر تحديث لل npm

ما المشكلة و ما الحل ؟

محمد Fahmy · 15 يناير 2023

بتاريخ 20 ساعة قال Hadi Hasan:

عملت ذلك فكانت هذه النتيجة :

C:\Users\hp\Desktop\cmder_mini\cmder_mini                                                                                                             
λ npm config set fetch-retry-mintimeout 20000                                                                                                         
npm ERR! code ENOENT                                                                                                                                  
npm ERR! syscall open                                                                                                                                 
npm ERR! path C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)                                                              
npm ERR! errno -4058                                                                                                                                  
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)'                  
npm ERR! enoent This is related to npm not being able to find a file.                                                                                 
npm ERR! enoent                                                                                                                                       
                                                                                                                                                      
npm ERR! A complete log of this run can be found in:                                                                                                  
npm ERR!     C:\npm-cache\_logs\2023-01-14T16_45_20_396Z-debug-0.log                                                                                  
                                                                                                                                                      
C:\Users\hp\Desktop\cmder_mini\cmder_mini                                                                                                             
λ npm config set fetch-retry-maxtimeout 120000                                                                                                        
npm ERR! code ENOENT                                                                                                                                  
npm ERR! syscall open                                                                                                                                 
npm ERR! path C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)                                                              
npm ERR! errno -4058                                                                                                                                  
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)'                  
npm ERR! enoent This is related to npm not being able to find a file.                                                                                 
npm ERR! enoent                                                                                                                                       
                                                                                                                                                      
npm ERR! A complete log of this run can be found in:                                                                                                  
npm ERR!     C:\npm-cache\_logs\2023-01-14T16_45_41_238Z-debug-0.log                                                                                  
                                                                                                                                                      
C:\Users\hp\Desktop\cmder_mini\cmder_mini                                                                                                             
λ

جرب هذا الأمر.

npm init vue@latest

وأتبع التعليمات الموجودة في هذه الصفحة.

https://vuejs.org/guide/quick-start.html#creating-a-vue-application

محمد Fahmy · 17 يناير 2023

بتاريخ On 15‏/1‏/2023 at 20:48 قال Hadi Hasan:

عملت ذلك حتى وصلت إلى هذه الخطوة : npm run dev

يظهر لي هذا الخطأ :

failed to load config from C:\Users\hp\Documents\shadi-vue-project\vite.config.js
error when starting dev server:
Error: Cannot find module '@babel/types'
Require stack:
- C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\transformation\file\file.js
- C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\index.js
- C:\Users\hp\Documents\shadi-vue-project\node_modules\@vitejs\plugin-vue-jsx\dist\index.cjs
- C:\Users\hp\Documents\shadi-vue-project\vite.config.js
- C:\Users\hp\Documents\shadi-vue-project\node_modules\vite\dist\node\chunks\dep-5e7f419b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1053:15)
    at Module._load (node:internal/modules/cjs/loader:898:27)
    at Module.require (node:internal/modules/cjs/loader:1120:19)
    at require (node:internal/modules/helpers:112:18)
    at _t (C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\transformation\file\file.js:29:16)
    at Object.<anonymous> (C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\transformation\file\file.js:52:5)
    at Module._compile (node:internal/modules/cjs/loader:1239:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1293:10)
    at _require.extensions.<computed> [as .js] (file:///C:/Users/hp/Documents/shadi-vue-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62106:17)
    at Module.load (node:internal/modules/cjs/loader:1096:32)

الخطا يقول أن حزمة babel غير مثبتة, يمكنك تثبيتها من خلال الأمر التالي.

yarn add @babel/core --dev

عبدالباسط ابراهيم · 13 يناير 2023

حاول تنفيذ الأمر التالي وهو محاولة حذف ال cache ربما يحل المشكلة

npm cache clean --force

جرب حذف ال cache من خلال تنفيذ الأمر السابق ومحاولة تجربة بناء مشروع vue

Hadi255 · 13 يناير 2023

بتاريخ 3 ساعة قال عبدالباسط ابراهيم:
حاول تنفيذ الأمر التالي وهو محاولة حذف ال cache ربما يحل المشكلة
npm cache clean --force 
جرب حذف ال cache من خلال تنفيذ الأمر السابق ومحاولة تجربة بناء مشروع vue

مرحبا

حاولت مرارا لم ينفع ذلك

محمد Fahmy · 14 يناير 2023

بتاريخ 8 ساعة قال Hadi Hasan:

مرحبا

حاولت مرارا لم ينفع ذلك

أنصحك باستخدام مدير الحزم Yarn.

وهذه طريقة تثبيت Vue وعمل مشروع جديد من خلال مدير الحزم yarn.

قم بتثبيت yarn من خلال الأمر التالي.

npm install --global yarn

ثم قم بتثبيت Vue/cli من خلال الأمر التالي.

yarn global add @vue/cli

ولعمل مشروع Vue جديد نفذ الأمر التالي.

vue create project-name

Hadi255 · 14 يناير 2023

بتاريخ منذ ساعة مضت قال Mohammed Fahmy:
أنصحك باستخدام مدير الحزم Yarn.

وهذه طريقة تثبيت Vue وعمل مشروع جديد من خلال مدير الحزم yarn.

قم بتثبيت yarn من خلال الأمر التالي.
npm install --global yarn
ثم قم بتثبيت Vue/cli من خلال الأمر التالي.
yarn global add @vue/cli
ولعمل مشروع Vue جديد نفذ الأمر التالي.
vue create project-name

عملت أول خطوتين بتثبيت yarn و Vue/cli بنجاح، وعند محاولة عمل مشروع ظهر نفس الخطأ مع مشاكل بطء الانترنت :

npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! network Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\npm-cache\_logs\2023-01-14T09_25_50_817Z-debug-0.log
 ERROR  Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
    at ChildProcess.<anonymous> (C:\Users\hp\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\executeCommand.js:138:16)
    at ChildProcess.emit (node:events:513:28)
    at cp.emit (C:\Users\hp\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1098:16)
    at ChildProcess._handle.onexit (node:internal/child_process:304:5)

محمد Fahmy · 14 يناير 2023

بتاريخ 1 ساعة قال Hadi Hasan:

عملت أول خطوتين بتثبيت yarn و Vue/cli بنجاح، وعند محاولة عمل مشروع ظهر نفس الخطأ مع مشاكل بطء الانترنت :

npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! network Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\npm-cache\_logs\2023-01-14T09_25_50_817Z-debug-0.log
 ERROR  Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
    at ChildProcess.<anonymous> (C:\Users\hp\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\executeCommand.js:138:16)
    at ChildProcess.emit (node:events:513:28)
    at cp.emit (C:\Users\hp\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1098:16)
    at ChildProcess._handle.onexit (node:internal/child_process:304:5)

جرب أن تقوم بأغلاق جهازك وجرب من جديد و أن ظهر لك نفس الخطاء جرب هذه الأوامر.

npm config set fetch-retry-mintimeout 20000

npm config set fetch-retry-maxtimeout 120000

Hadi255 · 14 يناير 2023

بتاريخ 4 ساعة قال Mohammed Fahmy:
جرب أن تقوم بأغلاق جهازك وجرب من جديد و أن ظهر لك نفس الخطاء جرب هذه الأوامر.
npm config set fetch-retry-mintimeout 20000
npm config set fetch-retry-maxtimeout 120000

عملت ذلك فكانت هذه النتيجة :

C:\Users\hp\Desktop\cmder_mini\cmder_mini                                                                                                             
λ npm config set fetch-retry-mintimeout 20000                                                                                                         
npm ERR! code ENOENT                                                                                                                                  
npm ERR! syscall open                                                                                                                                 
npm ERR! path C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)                                                              
npm ERR! errno -4058                                                                                                                                  
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)'                  
npm ERR! enoent This is related to npm not being able to find a file.                                                                                 
npm ERR! enoent                                                                                                                                       
                                                                                                                                                      
npm ERR! A complete log of this run can be found in:                                                                                                  
npm ERR!     C:\npm-cache\_logs\2023-01-14T16_45_20_396Z-debug-0.log                                                                                  
                                                                                                                                                      
C:\Users\hp\Desktop\cmder_mini\cmder_mini                                                                                                             
λ npm config set fetch-retry-maxtimeout 120000                                                                                                        
npm ERR! code ENOENT                                                                                                                                  
npm ERR! syscall open                                                                                                                                 
npm ERR! path C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)                                                              
npm ERR! errno -4058                                                                                                                                  
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\hp\Desktop\cmder_mini\cmder_mini\(same as "user" config, ignored)'                  
npm ERR! enoent This is related to npm not being able to find a file.                                                                                 
npm ERR! enoent                                                                                                                                       
                                                                                                                                                      
npm ERR! A complete log of this run can be found in:                                                                                                  
npm ERR!     C:\npm-cache\_logs\2023-01-14T16_45_41_238Z-debug-0.log                                                                                  
                                                                                                                                                      
C:\Users\hp\Desktop\cmder_mini\cmder_mini                                                                                                             
λ

Hadi255 · 15 يناير 2023

بتاريخ 4 ساعة قال Mohammed Fahmy:
جرب هذا الأمر.
npm init vue@latest
وأتبع التعليمات الموجودة في هذه الصفحة.

https://vuejs.org/guide/quick-start.html#creating-a-vue-application

عملت ذلك حتى وصلت إلى هذه الخطوة : npm run dev

يظهر لي هذا الخطأ :

failed to load config from C:\Users\hp\Documents\shadi-vue-project\vite.config.js
error when starting dev server:
Error: Cannot find module '@babel/types'
Require stack:
- C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\transformation\file\file.js
- C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\index.js
- C:\Users\hp\Documents\shadi-vue-project\node_modules\@vitejs\plugin-vue-jsx\dist\index.cjs
- C:\Users\hp\Documents\shadi-vue-project\vite.config.js
- C:\Users\hp\Documents\shadi-vue-project\node_modules\vite\dist\node\chunks\dep-5e7f419b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1053:15)
    at Module._load (node:internal/modules/cjs/loader:898:27)
    at Module.require (node:internal/modules/cjs/loader:1120:19)
    at require (node:internal/modules/helpers:112:18)
    at _t (C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\transformation\file\file.js:29:16)
    at Object.<anonymous> (C:\Users\hp\Documents\shadi-vue-project\node_modules\@babel\core\lib\transformation\file\file.js:52:5)
    at Module._compile (node:internal/modules/cjs/loader:1239:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1293:10)
    at _require.extensions.<computed> [as .js] (file:///C:/Users/hp/Documents/shadi-vue-project/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62106:17)
    at Module.load (node:internal/modules/cjs/loader:1096:32)

Hadi255 · 17 يناير 2023

بتاريخ 4 ساعة قال Mohammed Fahmy:
الخطا يقول أن حزمة babel غير مثبتة, يمكنك تثبيتها من خلال الأمر التالي.
yarn add @babel/core --dev

لقد ظهرت هذه الرسالة :

VITE v4.0.4 ready in 1150 ms

http://localhost:5173/

Network: use --host to expose

press h to show help

شكرا لك . أصبحت قادرا على المتابعة.

هل سيختلف العمل عن ال cli ?

تم التعديل في 17 يناير 2023 بواسطة Hadi Hasan

مشكلة في إنشاء مشروع vue/cli

السؤال

Hadi255

10 أجوبة على هذا السؤال

Recommended Posts

محمد Fahmy

محمد Fahmy

عبدالباسط ابراهيم

Hadi255

محمد Fahmy

Hadi255

محمد Fahmy

Hadi255

Hadi255

Hadi255

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية