首页 前端知识 使用nvm管理node安装vue搭建vue可视化界面创建vue项目全流程

使用nvm管理node安装vue搭建vue可视化界面创建vue项目全流程

2024-09-21 21:09:45 前端知识 前端哥 504 142 我要收藏

nvm安装

  1. 首先确保window系统中不存在node,若从未安装过node则可以跳过本步骤
    先cmd输入node -v查看是否存在node版本,存在则需要进行以下步骤:
    控制面板 -> 卸载程序 -> 卸载nodejs
    删除node安装目录下node文件夹
    删除以下文件夹(如果存在的话)
    C:\Program Files (x86)\Nodejs
    C:\Program Files\Nodejs
    C:\Users{User}\AppData\Roaming\npm
    C:\Users{User}\AppData\Roaming\npm-cache
    删除C:\Users\用户名 下的 .npmrc文件以及 .yarnrc 文件

    环境变量中npm、node的所有相关统统删掉
    上述步骤可以得到一个纯净版没有受到之前安装node而影响接下安装的目标
    安装nvm

  2. 接着开始安装nvm进行管理node,官网下载 nvm 包 https://github.com/coreybutler/nvm-windows/releases
    在这里插入图片描述

  3. 下载完成后开始安装,需要修改一下安装路径,不建议安装在C盘,如下图:
    在这里插入图片描述

安装完后,先找到nvm安装文件夹路径 =》找到 setting.txt 文件 =》新增两行信息,配置下载源
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

在这里插入图片描述

win + R,调用cmd,输入nvm,出现下面这一堆就表示安装成功了
在这里插入图片描述

安装完成 nvm 之后,系统环境变量和用户环境变量会默认帮我们配置好 NVM_HOME 和 NVM_SYMLINK
在这里插入图片描述

安装完成后开始插入nodejs首先使用 nvm list available 查询可插入版本号,LST表示可插入稳定版本。【如未指定版本,建议安装LTS下的版本】
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1c83cdc1b33b48da9043f6230ce79db0.png
关于node版本上述展示仅仅为显示支持,其他版本均支持,
安装指定node.js版本
安装命令:nvm install 20.13.0
选择使用版本命令:nvm use 20.13.0
查看当前已安装的node.js版本命令:nvm list
带*号的是正在使用的 ,安装完成后可以分别输入命令行 node -vnpm -v,检验node.js以及对应npm是否安装成功 ,如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4826bd2c030b45c1a06ca91cc2df4868.png
下面是一些nvm命令,有需要可以使用:
删除对应版本 :nvm uninstall node版本号 //例如:nvm uninstall 16.14.0)即可
打开版本控制或关闭,在使用多版本的时候可以使用:nvm on/nvm off

  1. 安装好后目录nvm是这样的:
  2. 在这里插入图片描述
    node文件夹结构如下
    在这里插入图片描述
    修改npm默认镜像源为淘宝镜像 :npm config set registry https://registry.npmmirror.com
    ![](https://img-blog.csdnimg.cn/direct/3e24cf7b7fb2488d9a6e3361f09b53a0.png

检查是否设置淘宝镜像成功:npm config get registry
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/632c6abd436847a594fa2537e35833f0.png
5. 环境变量配置 1)新增俩文件夹 首先创建"node_global" 和 “node_cache”两个文件夹进行全局安装的时候安装对应的库到这两个文件。 在nvm的 nodejs 安装路径 E:\software\nodejs新建两个文件夹命名为 “node_global” 和 “node_cache”
6. 在这里插入图片描述

  1. 打开cmd命令行工具,输入以下两句操作(两个路径就是新建上面两个文件夹的路径,主要目的是方便后面window机器使用方便)
    npm config set prefix “E:\software\nodejs\node_global”
    npm config set cache “E:\software\nodejs\node_cache”

    在这里插入图片描述

2)设置环境变量
我的电脑右键 =》属性 =》高级系统设置 =》系统属性(高级)=》 环境变量,进入环境变量对话框。

如果环境变量未正确配置,输入node -v 会报错,系统将无法正确识别"node"命令。

需要我们设置的地方有两个:

  1. 系统环境变量新增 NODE_PATH 变量在【系统变量】新建环境变量 NODE_PATH 为 E:\software\nodejs\node_global\node_modules
    在这里插入图片描述

  2. 用户变量修改 path 变量
    E:\software\nodejs\node_globa
    E:\software\nodejs\node_cache

    在这里插入图片描述

接下来可以使用安装自己需要的一些命令
3. 使用 nrm 来管理 npm 源
4. 首先,通过以下命令来安装 nrm命令: npm install -g nrm
5. 查看:nrm ls
在这里插入图片描述
下面是nrm的一些命令
2)切换源:将当前的 npm 源切换为指定的源。可以使用源的名称或 URL 作为 参数。

nrm use

3)添加源:添加一个新的 npm 源并指定其名称和 URL。

nrm add

4)删除源:删除指定的 npm 源,需要提供源的名称或 URL 作为 参数。

nrm del

5)测试源的速度:测试指定源的响应速度,并显示测试结果。

nrm test
在这里插入图片描述

6)显示当前使用的源:当前正在使用的 npm 源的名称和 URL。

nrm current

安装cnpm进行替换npm
安装cnpm,输入以下命令:
npm install -g cnpm --registry=https://registry.npmmirror.com
进行永久设置:npm config set registry https://registry.npmmirror.com
输入cnpm -v ,检测是否正常
在这里插入图片描述

查看npm安装位置:npm root -g
查看cnpm安装位置:cnpm root -g
在这里插入图片描述

清屏命令:cls
在这里插入图片描述
安装vue脚手架:npm install -g @vue/cli (vue3.x最新版本)

安装完成使用vue -V命令进行查看vue版本,目前为最新版
在这里插入图片描述

卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

安装3.0及其以后指定版本 如:npm install -g @vue/cli@3.2.0
使用vue ui界面创建项目:vue ui
Cmd界面命令行输入vue ui
在这里插入图片描述

下面为vue创建项目的ui界面,项目存放路径可以自定义修改,修改完需要点击回车才生效
在这里插入图片描述

点击创建项目,输入项目名称,包管理器选择npm,有git地址可以自行设置
在这里插入图片描述

点击下一步,可以选择手动或者其他,这示范为手动
在这里插入图片描述

手动根据项目需要勾选功能插件,我选择Router和Vuex,使用配置文件,取消了Linter/Formatter,
在这里插入图片描述

这边使用是3.x,如下即可创建项目
在这里插入图片描述

一般不会预设名,如下:
在这里插入图片描述

点击创建项目等待创建完成会出现如下页面:
在这里插入图片描述

如下界面即代表项目创建完成
在这里插入图片描述

Ui界面暂不一一介绍了,各个页面功能展示如下图所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上述项目创建完成,找到项目存放路径
在这里插入图片描述

可使用相关开发软件进行打开,项目结构如下图,可进行代码开发
在这里插入图片描述
另外关于vue ui命令行界面退出,使用ctrl+c即可退出
在这里插入图片描述
另外项目中遇到的问题:
拉取已有项目进行启动,使用npm install报以下错:
node:internal/modules/cjs/loader:1148 throw err; ^
Error: Cannot find module ‘E:\software\nodejs\node_global\node_modules\npm\bin\npm-cli.js’ at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15) at Module._load (node:internal/modules/cjs/loader:986:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12) at node:internal/main/run_main_module:28:49 { code: ‘MODULE_NOT_FOUND’, requireStack: [] }
查看路径下未存在npm目录,将E:\software\nvm\v20.13.0\node_modules下的npm拷贝一份至E:\software\nvm\v20.13.0\node_global\node_modules即可解决
在这里插入图片描述

上述是参考该博主地址:https://blog.csdn.net/weixin_45811256/article/details/130860444,加工了一下个人创建项目需要,有问题还望指教

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18453.html
标签
评论
发布的文章

javascript jQuery

2024-09-21 22:09:33

【若依】表格固定列宽

2024-09-21 22:09:30

Knockout-jQueryUI 使用指南

2024-09-21 22:09:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!