如何在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 开发环境,好了,资源留下了,我也该下班了。