欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 Win10 系统安装配置 node.js 和 vue.js

程序员文章站 2022-07-03 11:45:46
今天学习 vue 开发,需要下载安装node.js 和 vue.js,搜了一遍,网络上都杂七杂八,太过成年老旧,所以我根据自己的安装经验,整理一份 Win 10系统的攻略,对大家的安装就便捷很多!前言安装 vuejs 之前一定要先下载安装 nodejs,以及安装好 npm和 cnpm步骤1.下载安装 nodejs2.配置 nodejs, npm环境3.下载安装 vuejs4.下载安装 cnpm1.去nodejs官网下载https://nodejs.org/en/我的电脑是64 ....

今天学习 vue 开发,需要下载安装node.js 和 vue.js,搜了一遍,网络上都杂七杂八,太过成年老旧,所以我根据自己的安装经验,整理一份 Win 10系统的攻略,对大家的安装就便捷很多!

前言

安装 vuejs 之前一定要先下载安装 nodejs,以及安装好 npm和 cnpm
步骤
1.下载安装 nodejs
2.配置 nodejs, npm环境
3.下载安装 vuejs
4.下载安装 cnpm

1.去nodejs官网下载

https://nodejs.org/en/

我的电脑是64 bit,所以点击这个,如果你是 32 bit就点击隔壁那个
荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 然后他就开始下载了,等他下载完,打开所在文件夹。

2.安装 nodejs

  • 双击打开下载好的文件

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 点击 next

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 勾选 协议 ,点击 next

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 选择安装路径(你可以自己决定安装在哪个盘,我是D:/),点击 next

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 不用勾选,点击 next

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 点击 Install

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 等待半分钟,安装中!

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

  • 安装完成,点击 Finish

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

3.检查 nodejs 和 npm 是否安装成功

  • WIN+R 打开 cmd

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

输入 node -v  , 然后回车,显示版本号,则表示 nodejs安装成功!

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

输入 npm -v , 然后回车,显示版本号,则表示 npm安装成功!

荐
                                                        Win10 系统安装配置 node.js 和 vue.js

4.配置 nodejs 环境

说明:环境配置的目的主要是为了改变安装NodeJS依赖的下载位置,方便日后管理,以及配置缓存Cache的路径。因为NodeJS在执行安装语句时,会将安装的模块默认安装到C:\Users\用户名\AppData\Roaming\npm,从而占用C盘的空间。

1.创建npm模块安装目录

安装时,默认是使用国外的镜像,速度较慢。推荐使用国内镜像!
荐
                                                        Win10 系统安装配置 node.js 和 vue.js
分别在NodeJS安装目录下创建node_cache和node_global两个文件夹,如上图所示。
创建文件夹后,打开dos命令窗口,分别执行下面两行命令

npm config set prefix "node_global的路径"
npm config set cache "node_cache的路径"

例子:npm config set cache “D:\Program Files\nodejs\node_global”

2.配置环境变量

我的电脑->右键->属性->高级系统设置->高级->环境变量
荐
                                                        Win10 系统安装配置 node.js 和 vue.js

2.1新建NODE_PATH系统变量

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
变量值为你的路径,其实看到这个变量值我开始是有一些疑问的,明明node_global是一个空文件夹,为什么这个值需要定义到一个不存在的文件夹上,原来后面node会自动创建。
荐
                                                        Win10 系统安装配置 node.js 和 vue.js

2.2更改用户path变量

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为下图:
荐
                                                        Win10 系统安装配置 node.js 和 vue.js
点击确定!

2.3 修改镜像源
在命令行输入下面代码

npm config set registry https://registry.npm.taobao.org
2.4 测试

我们先安装一个express模块试试
打开dos命令窗口,执行下面的命令

npm install express -g      # -g  是全局安装的意思

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
安装成功
打开 D:\Program Files\nodejs\node_global\node_modules 文件夹
荐
                                                        Win10 系统安装配置 node.js 和 vue.js
发现已经安装好了,而这个位置就是我们在环境变量中配置的NODE_PATH的值

5.安装 vuejs

百度搜索 vuecli3  或者直接访问 https://cli.vuejs.org/
打开后是下面这个网页,点击 Get Start

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
进入下面这个页面
荐
                                                        Win10 系统安装配置 node.js 和 vue.js
点击 安装,进入下面这个页面
荐
                                                        Win10 系统安装配置 node.js 和 vue.js

如果你想用 npm安装,在命令行输入这句话即可,但是我更推荐使用 cnpm安装,更快!

我们可以使用这个网页提供给我们的 npm安装 vue ,但是很慢,我们也可以采用 cnpm 安装,十分快!不过我们要先安装 cnpm!我推荐各位使用 cnpm安装,npm确实很慢,很浪费时间!下面介绍如何用cnpm安装。

1.安装 cnpm
在 cmd 中输入下面的代码,安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
安装成功!

2.查询版本号,看是否安装
输入 cnpm -v

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
如果和我一样,那就是正确的。

3.用 cnpm 安装 vuejs
在 cmd 中输入下面代码 ,安装 vuejs
cnpm install -g @vue/cli

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
安装中…安装成功

4.查询 vue 的版本号
在 cmd 中输入   vue-V
注意 -V 要大写 V,小写会报错

荐
                                                        Win10 系统安装配置 node.js 和 vue.js
安装 vuejs 成功

以上就是本文章的全部内容!写文不易,对你有帮助,请点个赞!谢谢!

本文地址:https://blog.csdn.net/weixin_43648017/article/details/107325272