1.安装node.js

前往官网 https://nodejs.org/en/download/

image-20220128163329325

在D盘中创建nodejs文件夹，将安装路径放在这。

image-20220128163439512

image-20220128163508468

在文件夹中创建node_cache 和 node_global

分别保存node的缓存和node的全局变量

image-20220128163606807

2.配置node和npm的环境

前往 系统变量 --> 高级 -->环境变量

image-20220128164307176

在系统变量中新建NODE_PATH，如下图

image-20220128164127691

在 系统变量 中的path里添加路径

image-20220128164553564

点击 环境变量 的path

image-20220128164654824

红圈中的路径一定要改掉，不然后面的所有东西都会安装到c盘的默认文件夹去

image-20220128164722318

3.在cmd中进行npm相关安装

win+r 输入cmd，打开终端

缓存设置：

npm config set cache "D:\nodejs\node_cache"

全局变量设置：

npm config set prefix "D:\nodejs\node_global"

在c盘用户里可以看到有“.npmrc”文件，用vscode打开可以验证npm的设置

image-20220128170102988

image-20220128170419337

然后输入：npm install express -g 来测试是否可以成功安装

“-g”是安装全局变量的意思

image-20220128170610576

如果看到“operation not permitted”说明权限不够，对D:\nodejs 文件夹的设置--> 安全-->编辑 里面完全控制勾上

image-20220128170749347

再试一遍，就能安装成功

image-20220128170933215

打开D:\nodejs\node_global\ 看到安装的express文件说明一切都顺利

image-20220128171214367

image-20220128171227304

如果使用npm下载过慢的话，可以安装淘宝的npm镜像——cnpm

输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

image-20220128171653898

安装 webpack

输入：

cnpm install webpack -g

安装vue

输入：

cnpm install vue -g

安装vue-cil脚手架

输入

cnpm install vue-cli -g

输入“webpack -v”，会看到以下代码：

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

此时回车，输入：

cnpm install webpack-cli -g

就能成功安装

image-20220128172623878

image-20220128172642876

至此，依次输入以下代码检查是否安装完成

node -v
npm -v
webpack -v
vue -V
cnpm -v

image-20220128172504876

image-20220128172711229

image-20220128172718731

4.创建vue

在D盘创建vueproject文件夹，用来存放vue文件

在cmd中用cd切换到该文件夹，使用vue init的命令,创建项目

vue init webpack firstvue

其中firstvue可以改成想要的目录名

随后依次按照提示输入信息

image-20220128173145920

如果发现无法安装，可能是vueproject文件夹的权限不够，和之前一样设置“完全控制”的权限即可

image-20220128173317948

image-20220128173339646

按照提示即可

cd firstvue
npm run dev

image-20220128173422582

输入网址，安装成功！！

image-20220128173439114

随后就可以在webstorm等软件中打开项目了

image-20220128173519533

image-20220128173539844

要运行的话，点击右上角edit configurations,选择npm，如图设置

image-20220128173724783

image-20220128173757831

成功！

5.参考文献

https://blog.csdn.net/thumbs_up_sign_ygj/article/details/104979272

https://www.cnblogs.com/guanxiying/p/13160323.html

我按照大佬的文章配环境发现还是遇到了很多问题，琢磨了好几个小时终于成功，故写下这篇教程，希望能帮到更多的人

最后修改：2024 年 02 月 15 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏