详细讲解安装配置Node环境,在软件中通过命令启动Vue项目

1 篇文章 0 订阅

安装node环境

  1. 进入Node.js官网,下载LTS版本,启动软件,点击next,接受协议打勾,点击next,修改软件存放路径,改为D:\Program Files\nodejs,然后点击next,继续next,不需要打勾直接next,点击Install,安装成功
  2. 验证:
    点击win+R,输入cmd,回车,在命令提示符输入node -v、
    npm -v命令
    在这里插入图片描述
    此页面代表成功
  3. 修改全局模块以及缓存路径
    在cmd窗口输入npm root -g,查看全局安装的模块所在目录。
    在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会占C盘空间
    所以在nodejs下新建node_global以及node_cache文件
    在这里插入图片描述
    打开cmd执行以下语句:npm config set prefix “D:\Program Files\nodejs\node_global”,npm config set cache “D:\Program Files\nodejs\node_cache”
    在这里插入图片描述
  4. 配置环境变量
    在这里插入图片描述
    在这里插入图片描述
    5.下载淘宝镜像,安装脚手架等等命令
    在命令提示符中输入npm install express -g,npm i -g cnpm --registry=https://registry.npm.taobao.org
    在这里插入图片描述
    在运行这里的时候,一直报错
    在这里插入图片描述提示权限不够,后来通过这个方法解决:
    在node_cache文件夹以及node_global文件夹中,鼠标右键点击属性,打开后点击安全,对四个用户或组进行编辑,把所有允许下面的框全部勾上,点击应用后确定。
// 接下来依次操作命令
// 
cnpm
cnpm -v
npm info vue
npm install vue -g
npm install -g @vue/cli
vue -V
vue
npm install -g @vue/cli-service-global
vue --version

依次看运行结果:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
至此所有命令全部完成,又再打开一个命令提示符
6.创建Vue项目
输入cd desktop进入桌面,创建项目,命令为:vue create 项目名
在这里插入图片描述
同时可以看到该项目已经在桌面上显示了
在这里插入图片描述
7.通过VSCODE软件输入命令打开项目
在vscode中导入创建的项目,在终端输入命令,终端可以通过点击查看-终端找到。
命令如下:npm run serve
在这里插入图片描述
加载后,已经出现效果网址:
在这里插入图片描述
CTRL+点击网址打开,实现效果如下:
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值