NODEJS安装及环境配置 -> 创建vue项目

7 篇文章 0 订阅
2 篇文章 0 订阅
1.nodeJS版本 10.23.0 (vue项目中sass4.0版本号对应-https://blog.csdn.net/weixin_44748205/article/details/115118322)
	下载路径: https://nodejs.org/zh-cn/download/releases/

在这里插入图片描述

	检测: win+R输入cmd回车打开命令窗口,输入node -v 显示版本号则全局环境配置成功了

2. 安装 npm包管理工具(node10.0对应6.14.8版本)(node10.23.0版本自带了,直接输入命令验证)
	npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
	检测: 打开cmd输入npm -v 出现版本号则成功
	此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西
	进入到nodejs安装目录下点击执行npm.cmd文件生成node_global 文件(以管理员身份运行)  或  手动创建npde_global文件夹

	加快npm启动速度(3种方式)
	1.使用以下命令:npm config set registry=http://registry.npm.taobao.org/
	2.使用全局设置的命令:
		npm config set registry https://registry.npm.taobao.org --global
		npm config set disturl https://npm.taobao.org/dist --global
	3.找到node.js的安装目录,进入nodejs\node_modules\npm找到文件npmrc,打开后在该文件末尾加上这一行		registry = https://registry.npm.taobao.org

3.安装express(安装命令: npm install express -g)(以管理员身份运行CMD命令窗口再执行) 或 手动创建  node_cache 文件夹
	Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。

在这里插入图片描述

4.安装CNPM 包管理工具
	安装命令:  npm install -g cnpm --registry=https://registry.npm.taobao.org
	npm是node官方的包管理器。cnpm是个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。
	手动配置环境变量:
	win10: 桌面 -> 单机右键 ->  属性 -> 高级系统设置 参考下图:
	检验: cnpm -v
	

在这里插入图片描述
在这里插入图片描述

5.安装yarn 包管理工具 (https://yarn.bootcss.com/docs/)
	安装命令:  npm install yarn -g
	Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。
	检验: yarn -v
#缓存目录修改:
	npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\software\nodejs\
	(1)首先确认nodejs文件夹下是否存在node_cache、node_global两个文件夹,没有则需要创建

在这里插入图片描述

然后cmd运行以下2条命令(一定要注意自己的路径,复制的时候一定要注意空格):
npm config set prefix "D:\software\nodejs\node_global "
npm config set cache "D:\software\nodejs\node_cache"
	检验: 查看npm默认安装路径 npm config get prefix
	显示D:\software\nodejs \node_cache则修改成功

#安装说明:
	杠(-S) 即 save(保存)
包名会被注册在package.json的dependencies里面,在生产环境下这个包的依赖依然存在
杠(-D) 即 dev(生产)
包名会被注册在package.json的devDependencies里面,仅在开发环境下存在的包用-D,如babel,sass-loader这些解析器

6.测试(以管理员身份运行CMD命令窗口再执行)
(1)安装vue (vue脚手架不同版本的区别和介绍_一位前行者的博客-CSDN博客_vue脚手架和vue的区别)
	npm install vue -g
(2)安装脚手架
	2.9.6版本的安装:npm install -g vue-cli 
3.0.0版本的安装:npm install -g @vue/cli
检验vue: vue -V

(3)安装webpack
PS:不要忘记webpack4.+开始webpack-cli是必备的哦 版本号一定要对应
   npm install --g webpack@4.44.2 webpack-dev-server@3.11.2 webpack-cli@3.3.12

(4)创建vue项目测试(这里的版本号是指脚手架的版本号)
	2.9.6 初始化项目是用 vue init webpack my-project  
	3.0.0 以上初始化项目是用 vue create my-project
	打开cmd窗口,进入指定文件夹,输入初始化项目语句…
	运行项目输入网址,访问成功说明环境搭建成功~
参考下图:

在这里插入图片描述

-------------------------------------------错误信息--------------------------------------------------------

1.npm安装yarn报错
错误码:
Error: Could not create the Java Virtual Machine. 
Error: A fatal exception has occurred. Program will exit.

原因: 由于node.js中的yarn和hadoop的冲突了,系统环境变量也都配置了全局环境。
网上解决方案: https://blog.csdn.net/weixin_46759393/article/details/117968453
我的解决方案: 异想天开的我这么做的,把node相关环境变量放在HADOOP之前,居然成功了!!!
万能大法,重启电脑~
然后再执行yarn -v居然显示了版本号。

在这里插入图片描述

将node配置路径移到HADOOP之前:

在这里插入图片描述

2.vue-element-admin-master项目安装依赖报错
错误码:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git
npm ERR! fatal: unable to access 'https://github.com/nhn/raphael.git/': OpenSSL SSL_read: Connection was reset, errno 10054
npm ERR! exited with error code: 128
原因:
解决方案: 
	清空缓存命令(如果终端执行不了就打开cmd窗口执行): npm cache clean --force
	使用淘宝镜像: npm config set registry https://registry.npm.taobao.org
	重新安装依赖: npm install

在这里插入图片描述

3.git导出项目失败
错误码: fatal: unable to access 'https://github.com/taylorchen709/vue-admin.git/': Empty reply from server
解决方案: 将git clone https:// github...... 改成 git clone git:// github…

在这里插入图片描述

4. 安装node-sass报错时执行
错误码: npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
原因: 网速不好或者版本过高,用淘宝镜像安装
解决方案:
	配置一下淘宝镜像: npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
	重新安装依赖: npm install

在这里插入图片描述

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值