创建Vue3项目,更多参考vue官网

 

一、环境:

1、Node版本 (node -v命令查询,参考则是需要18.0及以上)

C:\Users\86176>node -v
v16.14.0

后续又重新下载nvm进行新的版本安装,这里后面安装的19.0的也有错误,安装18.19.1

2、vue-cil版本(vue -V命令可查询电脑版本,参需3.0以上)

C:\Users\86176>vue -V
@vue/cli 5.0.8

3、其他命令

npm list vue  //查询vue版本,但是可能需要进入vue项目根目录才能

npm -V  //查询npm版本

nvm ls  //查询已安装的node版本,需要先安装nvm

 

二、安装nodejs版本18以上

下载nvm,参考链接

https://blog.csdn.net/m0_64697285/article/details/127318141

本次安装nvm没有卸载已有的版本,故后续使用新的nodejs版本时出现nvm use [version]出错,这里直接记录nvm所下载的node版本位置,进行指定环境变量就行,具体如图

 更改自动生成的环境变量值,

 然后重新使用nvm use [v]、nvm ls进行查看

 成功下载nvm,成功下载新版本的node!

 

三、创建Vue

在vue目录中使用npm create vue@时出现错误,原来是npm -v的错误,看报错就是模块少了点东西,

E:\Desktop\24_01\Webgis_VUE\onlyVue>npm create vue@latest
D:\Users\86176\Documents\nvm\v18.19.1\node_modules\npm\lib\es6\validate-engines.js:31
throw err
^

Error: Cannot find module '@npmcli/config'
Require stack:
- D:\Users\86176\Documents\nvm\v18.19.1\node_modules\npm\lib\npm.js
- D:\Users\86176\Documents\nvm\v18.19.1\node_modules\npm\lib\cli-entry.js
- D:\Users\86176\Documents\nvm\v18.19.1\node_modules\npm\lib\cli.js
- D:\Users\86176\Documents\nvm\v18.19.1\node_modules\npm\bin\npm-cli.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
at Module._load (node:internal/modules/cjs/loader:975:27)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at require (node:internal/modules/helpers:177:18)
at Object.<anonymous> (D:\Users\86176\Documents\nvm\v18.19.1\node_modules\npm\lib\npm.js:2:16)
at Module._compile (node:internal/modules/cjs/loader:1356:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\\Users\\86176\\Documents\\nvm\\v18.19.1\\node_modules\\npm\\lib\\npm.js',
'D:\\Users\\86176\\Documents\\nvm\\v18.19.1\\node_modules\\npm\\lib\\cli-entry.js',
'D:\\Users\\86176\\Documents\\nvm\\v18.19.1\\node_modules\\npm\\lib\\cli.js',
'D:\\Users\\86176\\Documents\\nvm\\v18.19.1\\node_modules\\npm\\bin\\npm-cli.js'
]
}

Node.js v18.19.1

逛下论坛,找个靠谱的掘金文章试了一下,https://juejin.cn/post/7294468438391390259

意思就是使用nvm下载node的时候出错了,这里就是去官网下载对应的nodejs版本,把他的module模块替换以下就这么思路,对我非常友好,实践

https://nodejs.org/en/about/previous-releases----node官网

找到对应版本,

 直接将解压的官方npm文件拖入到已经通过nvm下载的npm文件地方,然后选择替换目标文件即可,

 

然后使用npm -v查看效果

E:\Desktop\24_01\Webgis_VUE\onlyVue>npm -v
10.2.4

继续进行创建 npm create vue@latest

出现错误,稍微阅读以下err,没权限,因为我直接用的cmd进行的,,,

 

打开管理员命令行,切换到指定的vue项目目录,

PS C:\WINDOWS\system32> e:
PS E:\> cd Desktop
PS E:\Desktop> dir

cd Desktop\24_01\Webgis_VUE\onlyVue

然后使用进行创建npm create vue@latest

 按顺序之星命令。

输入npm run dev

 输入地址后查看

 bingo!

这次重新配置又让死去的记忆恢复啦!!

开始vue之旅吧,无尽的bug在等着你。

 

posted @ 2024-03-12 17:03  雨崩  阅读(184)  评论(0编辑  收藏  举报