微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Node.js环境搭建及脚手架的安装

Node.js环境搭建

node.js它自带 npm(node包管理工具),安装node.js时会一起安装,npm的作用就是对node.js依赖的包进行管理,也可以理解为用来安装/卸载node.js需要装的东西

下载对应你系统的Node.js版本

点击下载 Node.js

2022-06-21_135059.png

下载到D盘,待安装完成后,开始搭建环境

配置Node.js环境(NPM全局安装路径

我们先要配置好 NPM安装的全局模块所在的路径,以及缓存路径。之所以要配置,是因为后续在执行类似:npm install -g @vue/cli 的安装语句时,认会将模块安装到C盘里,占用C盘空间。

例如:我希望将全局模块所在路径和缓存路径放在我D盘下 nodejs > node缓存路径 文件夹中,则我需要在D:\nodejs\node缓存路径下创建两个文件node_globalnode_cache,如下图:

2022-06-21_161700.png

创建完两个空文件夹之后,打开cmd命令窗口,输入下面命令并执行:

npm config set prefix "D:\nodejs\node缓存路径\node_global" 

npm config set cache "D:\nodejs\node缓存路径\node_cache"

接下来配置环境变量,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

2022-06-21_193029.png

2022-06-21_192237.png

测试Node.js环境

键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口

node -v
npm -v

2022-06-21_130439.png

安装国内的淘宝镜像

  • 解决用国外镜像安装慢的问题

使用命令配置npm的源地址为淘宝源

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

查看源地址是否正确被更改

npm config get registry

2022-06-21_130318.png

安装vue-cli

使用命令安装脚手架

npm install -g @vue/cli  //g代表global,即全局安装的意思

检查是否安装成功

vue-V 或 vue --version

2022-06-21_130839.png

使用vue-cli创建项目

首先,我们要在D盘新建一个工程文件夹来存放项目,然后进入到这个工程文件夹里,点击地址栏输入cmd回车,进入项目目录的cmd命令窗口

2022-06-21_131157.png

最后运行以下命令来创建一个新项目

vue create test  //项目创建  test表示项目名称
cd test  //进入项目目录
npm run serve  //项目启动

具体操作如下

  • 第二个问题,是按 空格键 进行选择
  • 其他的是按 方向键 进行选择

2022-06-21_132356.png

2022-06-21_133329.png

2022-06-21_133644.png

2022-06-21_163508.png

2022-06-21_163956.png

写在最后

这是我输出的第一篇博客文章,也许大家会好奇我为什么要写博客?既然我能在别人博客上查到我想要的东西去解决我的一个疑难问题,那是否我也可以去尝试输出一些东西帮助他人解决问题呢?而且也能够帮助到自己牢固知识点,提升自己的写作能力以及激发写作兴趣。所以回归到写博客这件事情上来,我觉得只要你对这件事是喜欢的,有激情的,同时写出的文章对你是有正向激励的,那就会使你有坚持下去的理由。我会继续加油的哈哈~

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐