本文介绍: 初学Vue环境快把我整死了QAQ 差点入门即入土 记录一下~。

提示文章写完后,目录可以自动生成如何生成可参考右边的帮助文档


前言

初学Vue环境快把我整死了QAQ 差点入门即入土

一、下载安装node.js

下载地址https://nodejs.org/en/
点击下图所示直接下载可以得到一个nodev18.14.2-x64.msi文件,直接双击安装

在这里插入图片描述
在这里插入图片描述
点击next,勾选同意协议然后next
在这里插入图片描述

选择路径,不要装到c盘,然后nextnext
在这里插入图片描述
复选框不必勾选,nextinstall
在这里插入图片描述
⑤完成:
在这里插入图片描述
安装完成后,.msi格式安装包已经将node启动程序添加系统环境变量path中,如果想验证可以查看一下:
node
打开cmd输入

node -v

出现版本号说明node安装成功。
最新版的node在安装时同时也安装npm,执行

npm -v

查看npm版本
在这里插入图片描述

二、node.js环境配置

打开安装目录安装目录新建两个文件夹node_globalnode_cache

在这里插入图片描述

② 用管理员权限打开cmd命令窗口输入npm config set prefix “你的路径node_global”:

npm config set prefix "D:nodeJsnode_global"

输入npm config set cache “你的路径node_cache” 可直接复制刚刚新建的空文件目录

npm config set cache "D:nodeJsnode_cache"

在这里插入图片描述

设置环境变量打开系统属性】-【高级】-【环境变量】,点击系统变量中的新建

在这里插入图片描述

变量名:NODE_PATH
变量值:你的路径node_globalnode_modules
填写完后依次点完确定即可( 告诉系统下载模块或者包都在这里了)
在这里插入图片描述

编辑用户变量环境变量)的 path,将默认的 C 盘下 APPDataRoamingnpm 修改成 你的路径node_global,点击确定:

在这里插入图片描述

在这里插入图片描述

⑤在Path里面添加NODE_PATH:
在这里插入图片描述

测试配置完成后,安装module测试下,咱们就安装最经常使用express模块打开cmd窗口输入以下命令进行模块全局安装

三、下载安装vue脚手架

管理员权限打开cmd,执行 以下命令全局安装@vue/cli:

npm install -g @vue/cli

中间遇到warning不用管:
在这里插入图片描述
②把cmd关掉,然后再用管理员权限打开切换到要创建项目目录(无限制,哪个都可以),然后使用命令创建项目

vue create test

方向键+回车选择vue2:
在这里插入图片描述
倒数第三行“successfully”,说明成功创建
在这里插入图片描述
注:因为网比较好所以之前没有把nmp换成淘宝镜像,如果下载过程持续15min以上建议配置一下淘宝镜像执行创建,命令是:

npm config set registry https://registry.npm.taobao.org

启动项目
依次执行最下方两条蓝色的命令,进入项目目录并启动项目编译一个事先写好的hello代码。中间可能出现安全中心警报,允许访问即可。完成:
在这里插入图片描述

两个地址分别是自己访问和同局域网的其他人访问地址,在浏览器输入url即可看到:
在这里插入图片描述

项目启动成功!

原文地址:https://blog.csdn.net/weixin_46447549/article/details/129243458

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_9233.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注