荐 Win10 系统安装配置 node.js 和 vue.js
今天学习 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就点击隔壁那个
- 然后他就开始下载了,等他下载完,打开所在文件夹。
2.安装 nodejs
- 双击打开
下载好的文件
- 点击
next
- 勾选
协议
,点击next
- 选择安装路径(你可以自己决定安装在哪个盘,我是D:/),点击
next
- 不用勾选,点击
next
- 点击
Install
- 等待半分钟,
安装中!
- 安装完成,点击
Finish
3.检查 nodejs 和 npm 是否安装成功
- WIN+R 打开
cmd
输入 node -v , 然后回车,显示版本号,则表示 nodejs安装成功!
输入 npm -v , 然后回车,显示版本号,则表示 npm安装成功!
4.配置 nodejs 环境
说明:环境配置的目的主要是为了改变安装NodeJS依赖的下载位置,方便日后管理,以及配置缓存Cache的路径。因为NodeJS在执行安装语句时,会将安装的模块默认安装到C:\Users\用户名\AppData\Roaming\npm,从而占用C盘的空间。
1.创建npm模块安装目录
安装时,默认是使用国外的镜像,速度较慢。推荐使用国内镜像!
分别在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.配置环境变量
我的电脑->右键->属性->高级系统设置->高级->环境变量
2.1新建NODE_PATH系统变量
变量值为你的路径,其实看到这个变量值我开始是有一些疑问的,明明node_global是一个空文件夹,为什么这个值需要定义到一个不存在的文件夹上,原来后面node会自动创建。
2.2更改用户path变量
将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为下图:
点击确定!
2.3 修改镜像源
在命令行输入下面代码
npm config set registry https://registry.npm.taobao.org
2.4 测试
我们先安装一个express模块试试
打开dos命令窗口,执行下面的命令
npm install express -g # -g 是全局安装的意思
安装成功
打开 D:\Program Files\nodejs\node_global\node_modules 文件夹
发现已经安装好了,而这个位置就是我们在环境变量中配置的NODE_PATH的值!
5.安装 vuejs
百度搜索 vuecli3 或者直接访问 https://cli.vuejs.org/
打开后是下面这个网页,点击 Get Start
进入下面这个页面
点击 安装
,进入下面这个页面
如果你想用 npm安装,在命令行输入这句话即可,但是我更推荐使用 cnpm安装,更快!
我们可以使用这个网页提供给我们的 npm安装 vue ,但是很慢,我们也可以采用 cnpm 安装,十分快!不过我们要先安装 cnpm!我推荐各位使用 cnpm安装,npm确实很慢,很浪费时间!下面介绍如何用cnpm安装。
1.安装 cnpm
在 cmd 中输入下面的代码,安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功!
2.查询版本号,看是否安装
输入 cnpm -v
如果和我一样,那就是正确的。
3.用 cnpm 安装 vuejs
在 cmd 中输入下面代码 ,安装 vuejs
cnpm install -g @vue/cli
安装中…安装成功
4.查询 vue 的版本号
在 cmd 中输入 vue-V
注意 -V 要大写 V,小写会报错
安装 vuejs 成功
以上就是本文章的全部内容!写文不易,对你有帮助,请点个赞!谢谢!
本文地址:https://blog.csdn.net/weixin_43648017/article/details/107325272
上一篇: 万商堂:让每一小产品都有自己橱窗
下一篇: element-ui动态换肤