文章目录
- 前言：什么是npm、webpack、vue-cli分别它们可以干啥，让我们来一起看看吧
- 一、Windows、MacOS操作系统下安装npm、cnpm、yarn
- 1. Windows系统
- 2. MacOS系统
- 3. 查看npm版本号
- 二、安装Node及Node版本管理工具说明
- 1、安装node
- 2、nvm常用指令管理Node多版本
- 三、Vue安装指令
- 1、安装 vue
- 2、查看Vue版本并验证是否安装成功
- 3、安装 webpack 模块
- 4、安装webpack-cli
- 5、查看vue-cli所有的版本号、安装vue-cli脚手架
- 6、删除vue 2.0版本vue-cli脚手架
- 7、安装的版本是vue-cli 3.0创建或使用vue 2.0项目需安装桥接工具
- 8、创建vue项目
- 9、运行vue项目
- 10、vue2.0、vue3.0使用webpack打包
前言：什么是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 dev
npm run serve "分项目使用默认dev"
（2）vue3.0版本运行指令
npm run serve
10、vue2.0、vue3.0使用webpack打包
npm run build
