当前位置: 代码迷 >> 综合 >> Windows下搭建vue 4.X开发环境——@vue/cli或vue-cli4
  详细解决方案

Windows下搭建vue 4.X开发环境——@vue/cli或vue-cli4

热度:32   发布时间:2024-02-12 23:37:46.0

如何在windows下搭建vue4.x开发环境,主要是vue-cli4 脚手架的,看完就知道如何搞了。

第一步:安装node.js
官网 http://nodejs.cn/download/
下载12.18.3版本 https://npm.taobao.org/mirrors/node/v12.18.3/
在这里插入图片描述

第二步:下载完成后,直接双击安装包(.exe),接下来按照图片走就OK了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述邻上图中的选择是默认的,默认已经选好了这四个。
在这里插入图片描述在这里插入图片描述
邻上图表示正在安装。
第三步:设置node的全局路径和缓存路径
安装完成后,在安装的根目录下创建两个文件夹node_cache、node_global
在这里插入图片描述
设置缓存路径,如下图
在这里插入图片描述
设置全局模块存放路径,如下图
在这里插入图片描述
第四步:安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述第五步:设置环境变量
在这里插入图片描述最后点击确认。其目的是在任何目录都可以执行node和vue命令。
新建NODE_PATH
在这里插入图片描述第六步:安装vue
需先关闭命令行窗口,再次打开cmd,执行安装命令 cnpm install vue -g
在这里插入图片描述
安装完成。说明下为什么关闭命令行窗口,是因为不关闭的话,命令行窗口还是在之前的path路径中,我们这里的path路径发生了变化,所以要关闭,快捷键ctrl+R重新打开cmd命令行窗口。
第七步:安装vue-cli脚手架
注意:2.0版本的和3.0版本之后的安装方法是不同的
安装vue@cli脚手架 npm install -g vue@cli
在这里插入图片描述
这一步如果报错。
解决方法一:npm i @vue/cli -g 后,再cnpm i @vue/cli
在这里插入图片描述解决方法二:可能是cnpm未安装,npm install -g cnpm重新安装
在这里插入图片描述
就可以了。然后cnpm install -g vue@cli 如果执行该命令时报错,可能是写法错,改为cnpm install -g vue-cli 安装就可以了(正如:我上面说的安装方法不同。我是按照视频安装,结果就卡到了,然后就改为cnpm install -g vue-cli 试了下,结果好了),安装成功后
在这里插入图片描述更新npm(这步可以省略)
在这里插入图片描述
第八步:安装vue cnpm install vue -g
在这里插入图片描述
第九步:查看vue版本 vue -V 这一步主要是为了查看你是否安装vue成功
在这里插入图片描述
第十步:创建项目 先在cmd里切换到“想将项目first安装的位置”,然后 vue create firsty
在这里插入图片描述到这就完成了。

说真的,我最近安装vue-cli4时遇到了好多的问题,找到的资料全是2.x或3.x的,难受的啊,因为做项目赶进度,老是出错,结果今天找了一天,找了一个讲解vue-cli4的视频,好好看—windows下搭建vue-cli 4.x 开发环境,好了,资源留下了,我也该下班了。

  相关解决方案