Vue2(七):超详细vue开发环境搭建(win7),nodejs下载与安装,安装淘宝镜像(报错已解决),配置脚手架

一、安装node.js

本来想粗略写一下的,但是搭建脚手架的时候,遇到了很多问题,浪费快两天时间,记录一下自己的解决办法希望对你们有帮助!

1.下载nodejs

安装包下载链接【CNPM Binaries Mirror】

下载我划线的这个:

2.安装nodejs

下载好之后,双击安装,点击next,到安装到哪个目录的时候,最好安装到自己指定的文件夹中。

安装完成后,在cmd命令窗口(win+R按下回车显示出cmd命令窗口)输入以下命令查看安装版本情况

【node -v】查看安装的node版本

【npm -v】查看安装的npm版本,node 安装好默认npm也被安装了

3.nodejs环境配置

(1)在你安装nodejs文件夹目录下,新建两个文件夹:

分别是:node_cache和node_global

(2)创建完两个空文件夹之后,打开cmd命令窗口,输入

复制代码
npm config set prefix "D:\program\node\node_global"
npm config set cache "D:\program\node\node_cache"

(3)关闭cmd窗口,【我的电脑】-右键-【属性】-【高级系统设置】-【高级】-【环境变量】

  • 新建【系统变量】,变量名为NODE_PATH,变量值为node_modules所在路径。
  • 我的路径是:E:\APP\nodejs\node_modules
  • 将【用户变量】下的【Path】修改为node_global所在路径。
  • 我的是E:\APP\nodejs\node_global

二、基于node.js安装cnpm(淘宝镜像)

1.以管理员身份运行cmd,输入淘宝镜像

复制代码
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.解决cnpm报错:The operation was rejected by your operating system

但是我发现我的一直报错,报错内容如下,如未报错,请跳过此步骤:

解决办法:

将这句命令

复制代码
npm install -g cnpm --registry=https://registry.npm.taobao.org

改为指定版本,重新以管理员身份打开cmd,运行即可

复制代码
npm install -g cnpm@7.1.1 --registry=https://registry.npm.taobao.org

过程可能很慢,如果卡住,按下回车即可

三、安装Vue

复制代码
cnpm install vue -g

四、安装脚手架vue-cli

复制代码
cnpm install vue-cli -g

五、项目创建

可以创建指定文件夹,在这下面创建你的项目,比如我的就是创建了一个vue_test文件夹,然后:

在这个文件夹路径前面输入cmd+空格 回车,就可以在这个路径下面创建你的项目了

1、在cmd命令窗口输入

复制代码
vue init webpack (项目名称)testone

稍微等一会,结果如下:

出现这样的结果后可以发现你的文件夹下面自动生成了一个testone文件夹:

2、切换到刚刚创建的目录下

继续在刚刚的cmd窗口输入:

复制代码
cd testone(你的项目名称)

此时就完成切换了:

六、项目运行

在刚刚的目录下面,输入:

复制代码
npm run dev

张天禹 老师输入的是npm run serve,但是我发现我输入之后报错,后来用上面提示的这个就OK了

之后就加载一大堆,但是出现这个端口号就OK了

这个网址打开后就是这样的页面:

如果还有什么问题,可以在评论区下面交流

相关推荐
林恒smileZAZ1 分钟前
用 Vue 3 + Electron 做桌宠:从启动退出到拖拽、单击与鼠标穿透
vue.js·electron·计算机外设
计算机魔术师3 分钟前
国办说AI要"缓"着上,但你公司可能已经全上完了
前端
IT_陈寒39 分钟前
SpringBoot性能优化完全指南
前端·人工智能·后端
溪语流沙1 小时前
【每天一个CSS | Day33】聚焦即弹出的命令面板
前端·css·html5·组件·每日一练
燕落南枝1 小时前
CSS 用户行为伪类::hover 与 :focus 详解
前端·css
风骏时光牛马1 小时前
业务基础信息管理库
前端
软件技术NINI1 小时前
基于JavaWeb 汽车租聘
java·vue.js·spring boot·后端·python·毕业设计·毕设
zyxqyy&∞1 小时前
sqli-labs-布尔盲注 (Less-8),时间盲注 (Less-9~10)
前端
m0_敲代码的彭于晏1688 小时前
Vercel 前端部署平台深度评测
前端
2301_32241428048 小时前
基于SpringBoot+Vue的休闲零食超市管理系统的设计与实现59004-计算机毕设 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·redis·mysql·决策树·推荐算法