npm、cnpm、yarn管理工具常见指令Node与Vue安装环境配置及nvm常用指令详解

Programming is art

已于 2024-06-12 10:43:12 修改

阅读量1k

点赞数 11

文章标签： npm node.js vue.js

于 2024-04-26 16:46:52 首次发布

本文链接：https://blog.csdn.net/web_FBI/article/details/136534446

版权

前言：什么是npm、webpack、vue-cli分别它们可以干啥，让我们来一起看看吧

npm：是Node.js下的资源包管理器，可以简单的理解为下载、更新、卸载等一系列操作的命令框工具。

webpack：它主要用途是通过CommonJS的语法把所有客户端需要发布的静态资源做整合，例如图片视频、静态页面、css样式、font-icon等资源合并打包等操作。

vue-cli：vue官方所提供快速生成一个Vue工程化的模版项目工具。

一、Windows、MacOS操作系统下安装npm、cnpm、yarn

注意事项：请各位小伙伴们首先检查一下自己的系统中是否已安装npm、cnpm、yarn可忽略此片段。

1. Windows系统

（1）全局安装npm

 npm install npm@latest -g

（2）下载并安装淘宝镜像

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

 2. 设置官方镜像源
 npm config set registry https://registry.npmjs.org

 3. 查看镜像使用状态
 npm config get registry

（3）下载安装cnpm

 1. 安装cnpm
 npm install -g cnpm --registry=https://registry.npmmirror.com
  
 3. 注册模块镜像
 npm set registry https://registry.npmmirror.com
 
 5. node-gyp 编译依赖的 node 源码镜像 
 npm set disturl https://n

（4）下载安装yarn

 npm install -g yarn	/* 局部安装 */
 npm install -g yarn@1.22.19	/* 全局安装 */

2. MacOS系统

（1）需要先安装Homebrew包管理器，在终端中输入以下命令

 /* 此命令会自动从GitHub上下载并安装Homebrew */
 /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

（2）验证Homebrew是否安装成功

 brew —version

（3）安装Node、npm、yarn

  /* node、npm */
 brew install node
 
 /* yarn */
 brew install -g yarn

3. 查看npm版本号

 npm -v

在这里插入图片描述

二、安装Node及Node版本管理工具说明

1、安装node

（1）node官方下载地址：https://nodejs.org/en/download
在这里插入图片描述

（2）下载完成后即可看到以下安装窗口，选择node安装包点击安装，路径根据自己按需选择。

在这里插入图片描述

（3）需要使用命令下载Node指定版本还请查看以下nvm常用指令处自行下载。

（4）查看当前安装的Node版本号

温馨提示：没有安装nvm版本管理工具的小伙伴可以使用以下方式查看Node版本号

 node -v

在这里插入图片描述

2、nvm常用指令管理Node多版本

技术概要：以下将讲述nvm指令如何切换已安装的Node版本，还没有安装好nvm的小伙伴们请前往nvm官方 https://nvm.uihtm.com 自行下载话不多说开始我们的正题，在日常工作中Vue2与Vue3项目频繁切换运行服务时，难免会遇到Node版本导致node_modules资源包安装不成功或者在运行npm run dev时产生的报错，为此个人推荐先根据项目去下载多个Node版本保存至电脑中，在运行不同的Vue2项目Vue3项目时根据当前项目的Node版本使用nvm ls先去查看当前在使用的Node版本号，选择一个需要切换的版本使用nvm use + '版本号’指令来切换当前的版本，切换完成后使用nvm current指令查看当前版本是否是我们切换后的版本即可，最后在项目命令中就可以使用我们的npm install安装资源包以及npm run dev或npm run serve启动Vue项目啦。

（1）安装node指定版本

 nvm install
 示例：nvm install v16.0.0

在这里插入图片描述

（2）切换到指定的node版本

 nvm use
 示例：nvm use v14.17.6

在这里插入图片描述

（3）显示当前node正在使用的版本

 nvm current

在这里插入图片描述

（4）查看当前所有已安装的node版本

 nvm ls

在此可以看到我当前Node正在使用的16.0.0版本和另外两个版本，这里可根据个人自行安装对应的版本。
在这里插入图片描述

（5）将指定版本创建别名

 nvm alias
 示例：nvm alias default v16.0.0

（6）卸载当前已安装所有node中指定的某个版本

 nvm uninstall
 示例：nvm uninstall v14.17.6

（7）在切换node版本后，重新安装已安装的全局npm包

 nvm reinstall-packages

（8）打开nvm自动切换

 nvm on

（9）关闭nvm自动切换

 nvm off

三、Vue安装指令

注意：以下内容将讲述如何安装Vue以及脚手架，并创建一个Vue项目，到此还没有安装Node环境的小伙伴请先前往本文章开头第一部分，下载所需的Node版本及环境配置。

1、安装 vue

（1）全局安装

 npm install vue -g		//当前指令中的 -g 代表为全局安装

（2）安装指定版本

 npm install vue@3.4.21

2、查看Vue版本并验证是否安装成功

(1) 验证Vue是否安装成功

 npm info vue

在这里插入图片描述

（2）查看Vue的版本

 npm list vue
 npm list vue -g	//当前指令中 -g 代表为查看全局

在这里插入图片描述

3、安装 webpack 模块

 npm install webpack -g

在这里插入图片描述

4、安装webpack-cli

 npm install --global webpack-cli

在这里插入图片描述

5、查看vue-cli所有的版本号、安装vue-cli脚手架

（1）查看vue-cli所有版本号

 npm view @vue/cli versions

在这里插入图片描述
（2）安装vue-cli指定版本

 npm install -g @vue/cli [version]	/* [version]这里表示的意思为版本号 */
 例如：npm install -g @vue/cli@3.5.0

在这里插入图片描述
（3）不指定版本，直接安装vue-cli

 npm install -g @vue/cli

（4）检查或查看vue-cli版本号

 vue -V

在这里插入图片描述

6、删除vue 2.0版本vue-cli脚手架

 npm uninstall -g vue-cli

7、安装的版本是vue-cli 3.0创建或使用vue 2.0项目需安装桥接工具

 npm install -g @vue/cli-init

8、创建vue项目

 （1）运行vue create 项目名称
 （2）可根据项目情况自行选择vue3.0版本、vue2.0版本、自定义版本

在这里插入图片描述

9、运行vue项目

 （1）vue2.0版本运行指令
  npm run serve 	//默认运行serve指令
  npm run dev 		//分项目使用dev指令
 （2）vue3.0版本运行指令
  npm run serve

10、vue2安装Vue-Router及配置

注意：如果在创建项目时默认选择的为vue3模版配置那么则不需要考虑安装vue-router在项目创建时会自动生成。
（1）安装vue-router

 npm install vue-router@2

（2）创建路由文件
在这里插入图片描述

（3）在创建的router文件夹目录下需要创建一个index.js文件用于路由配置
在这里插入图片描述

（4）在 index.js 文件中导入 Vue 和 Vue Router，并创建新的路由实例

 import Vue from "vue";
 import VueRouter from "vue-router";

（5）最后定义路由路径和组件的对应映射关系

 Vue.use(VueRouter);
 
 const router = new VueRouter({
   mode: 'hash', // 使用 hash 模式
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
     }
   ]
 });
 
 export default router;

（6）Vue Router路由目录下index.js文件路由完整配置

 import Vue from "vue";
 import VueRouter from "vue-router";
 import HelloWorld from "../components/HelloWorld.vue";

 Vue.use(VueRouter);
 
 const router = new VueRouter({
   mode: 'hash', // 使用 hash 模式
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
     }
   ]
 });
 
 export default router;

在这里插入图片描述

（7）前往main.js中挂载并配置全局路由
在这里插入图片描述

11、vue2.0、vue3.0使用webpack打包

 npm run build

Programming is art

关注

11
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
npm、cnpm、yarn管理工具常见指令Node与Vue安装环境配置及nvm常用指令详解

npm：是Node.js下的资源包管理器，可以简单的理解为下载、更新、卸载等一系列操作的命令框工具。webpack：它主要用途是通过CommonJS的语法把所有客户端需要发布的静态资源做整合，例如图片视频、静态页面、css样式、font-icon等资源合并打包等操作。vue-cli：vue官方所提供快速生成一个Vue工程化的模版项目工具。
复制链接

扫一扫