从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级

简介: 从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级

NVM

1.下载

下载地址:Releases · coreybutler/nvm-windows · GitHub  可能需要开启魔法

划到下面。找到如图所示的文件下载即可2.

2.安装(要记住安装的路径)

基本一键默认即可,你要修改路径也可以,但不建议

下载好后输入以下命令,如果出现版本号即成功安装

3.配置信息

根据之前下载的路径进入到setting文件配置以下信息

node_mirror: https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

4.环境变量

通常已经设置好了,如果没有的话可以自己按照着添加

 

 

Nodejs

1.下载

通过命令

nvm install <对应的版本>

2.使用

nvm user <对应的版本>

3.配置全局依赖

进入到nvm的安装路径,在下载好的node的版本里找到node_modules然后创建以下两个目录

然后再去到环境变量里的PATH 里面创建一个新的环境变量,路径是node_global这个文件的路径

NPM配置

1.查看配置

npm config ls

 

2.配置对应路径

分别按照以下命令进行配置

npm config set prefix "C:\Program Files\nodejs\node_modules\node_global"

npm config set cache "C:\Program Files\nodejs\node_modules\node_cache"

registry=https://registry.npm.taobao.org

 

下载cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.or

下载yarn

1.安装yarn工具

npm install -g yarn

2.配置文件

yarn config get registry 获取当前镜像源

yarn config set registry http://registry.npm.taobao.org/ 设置淘宝镜像源

 

下载vue

1.下载

npm install -g @vue/cli  或者 yarn global add @vue/cli

这里我是采用的npm命令

2.环境变量配置

 

前面已经配置过npm的其实已经算是也把vue配置好了但如果还是显示命令不存在可以看以下步骤

1.找到vue存在的路径

新建一个NPM_HOME,复制进去

然后在Path里再配置以下的信息

vue -V查看配置信息

 

小提示:用vue创建项目或者用npm初始化项目的时候的报错可以换cnpm尝试

 

如何在运行人家的vue项目

1.删除文件

通常人家编译好的项目是会已经有了node_modules和一个package-lock.json文件,package-lock.json记录了整个node_moudles文件夹的树状结构因此如果不删除的话容易导致npm版本不一致

2. 在项目终端运行cmd窗口

3.清除npm缓存

npm cache clean -force

4.按照自己的npm重新安装依赖

npm install

5.运行项目

npm run serve

 

目录
相关文章
|
3月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
147 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
3月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
248 2
|
3月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
47 3
|
5天前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
38 5
|
2月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
26天前
|
存储 资源调度 JavaScript
一文带你了解PNPM以及 npm,yarn,pnpm区别
一文带你了解PNPM以及 npm,yarn,pnpm区别
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
198 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
3月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
27 7
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。

相关实验场景

更多

推荐镜像

更多