nodejs + vue环境搭建

安装nodejs

下载并安装[nodejs]

nodejs下载地址https://nodejs.org/en/download/
历史版本下载地址https://nodejs.org/en/download/releases/
在这里插入图片描述

配置nodejs

(由于新版本node已经弃用 --global, --local
打开node安装目录,编辑npm.cmd,将prefix --g修改为prefix --location=global
在这里插入图片描述
在这里插入图片描述

在node的安装目录创建两个文件夹
node_cache(缓存文件夹)
node_global(全局模块存放文件夹)在这里插入图片描述
设置node缓存文件夹npm config --location=global set cache "C:\Program Files\nodejs\node_cache"
设置node全局模块文件夹npm config --location=global set prefix "C:\Program Files\nodejs\node_global"
在这里插入图片描述
配置node全局模块环境变量(由于 node 全局模块大多数都是可以通过命令行访问的,所以把(node_global)的路径添加进环境变量)
cmd中输入sysdm.cpl打开系统属性
在这里插入图片描述
在这里插入图片描述
新增变量NODE_PATH
在这里插入图片描述

安装cnpm(淘宝镜像)

国内访问不通畅,可以更改cnmp(淘宝镜像,大约10分钟同步一次官方镜像。有办法解决访问问题的可以忽略这一步)
npm install --location=global cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述
至此node安装完成

安装vue

vue

npm install vue --location=global

如安装cnpm可使用cnpm安装cnpm install vue --location=global
在这里插入图片描述

vue-cil

安装vue命令行工具,即vue-cli 脚手架

npm install @vue/cli --location=global

如安装cnpm可使用cnpm安装cnpm install @vue/cli --location=global
在这里插入图片描述

安装完成

测试,创建新项目

在要创建项目的根文件夹下打开cmd;
在这里插入图片描述

CHCP 65001

(更改cmd当前编码为UTF8,解决cmd控制台乱码情况)
在这里插入图片描述

vue create demo

(demo即为项目名称),然后回车
在这里插入图片描述
选择VUE项目使用的vue版本,这里以vue3为例,回车,等待完成
在这里插入图片描述
执行完毕后,会在当前目录下创建demo文件夹,这个文件夹中就是刚创建的项目
根据提示输入

cd demo
npm run serve

等待运行完毕
在这里插入图片描述
在浏览器输入地址:端口进行访问

在这里插入图片描述
至此NODEJS+VUE环境搭建完成

附上vue项目文件夹说明简介

内部文件夹说明
在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

指针不南

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值