vue3环境搭建
node.js 安装
验证nodejs是否安装成功
# 检测node.js 是否安装成功----cmd命令提示符中执行
node -v
npm -v
设置全局安装包保存路径、全局装包缓存路径
在node.js 安装路径下 创建 node_global 和 node_cache
# 设置npm全局安装包保存路径（新版本会默认安装路径下的node_global文件夹，可以用 npm config get prefix 命令先查看一下）
npm config set prefix "D:\nodejs\node_global"
# 设置npm装包缓存路径（新版本会默认安装路径下的node_global文件夹，可以用 npm config get cache 命令先查看一下）
npm config set cache "D:\nodejs\node_cache"# 验证命令
npm config get prefix # 查看npm全局安装包保存路径
npm config get cache # 查看npm装包缓存路径
npm list -global # 查看全局安装目录：
环境变量配置
# 设置环境变量(具体操作如下图)
【用户变量】变量名:Path C:\Users\用户名\AppData\Roaming\npm 改为 D:\nodejs\node_global
【系统变量】新建 变量名:NODE_PATH 变量值：D:\nodejs\node_global\node_modules
【系统变量】变量名:Path %NODE_PATH%
【系统变量】变量名:Path D:\nodejs\ (正常情况下会有安装路径，没有就自己添加)
双击用户变量的 PATH
删除：C:\Users\【你自己电脑的用户名】\AppData\Roaming\npm 环境变量
添加：D:\nodejs\node_global
【系统变量】新建，变量名：NODE_PATH 变量值：D:\nodejs\node_global\node_modules
双击【系统变量】Path，添加：%NODE_PATH% 和 D:\nodejs\
加速(npm 和 cnpm 二选一即可)
# npm更换国内镜像源（淘宝）
npm config set registry https://registry.npmmirror.com
# 腾讯云镜像
npm config set registry https://mirrors.cloud.tencent.com/npm/
# 华为云镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
# 中科大镜像
npm config set registry https://mirrors.ustc.edu.cn/npm/# 查看npm下载源（查看是否更换成功）
npm config get registry# 安装cnpm（使用国内阿里云镜像文件地址 https://registry.npmmirror.com/）
npm install -g cnpm --registry=https://registry.npmmirror.com
# 查看npm下载源
cnpm config get registry
cnpm config list
安装vue（可以跳过，不用全局安装–不推荐安装）
# 查看安装的vue信息
# 是用于 查看 npm 仓库中 Vue 包的详细信息 的命令。通过这个命令，你可以获取 Vue 包的元数据（metadata），包括版本、依赖、作者、仓库地址等
npm info vue # 安装vue
npm install vue -g
# 查看安装的vue版本（验证是否安装成功）
npm list vue -g
安装webpack（二选一）
如果你是vue3而且基于vite创建项目，webpack就不用安装
安装webpack（全局安装）
# 安装webpack（全局安装）
npm install webpack -g
# webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli：
npm install webpack-cli -g
# 列出你系统中所有 全局安装的包（可查看刚才安装的 webpack、webpack-cli ）
npm list -global# 卸载webpack、webpack-cli
npm uninstall webpack webpack-cli -g
安装webpack（局部安装）
# 进入项目目录下执行命令（局部安装）
npm install webpack --save-dev
npm install webpack-cli --save-dev
# 执行后会出现在 package.json 文件的 devDependencies 中# 卸载webpack、webpack-cli
npm uninstall webpack webpack-cli --save-dev
安装全局vue-cli脚手架
如果你是vue3而且基于vite创建项目，vue-cli就不用安装
# 安装全局vue-cli脚手架
npm install @vue/cli -g# 验证是否安装成功
vue -V# 卸载3.x版本
npm uninstall @vue/cli -g
创建vue项目
方式一（官方推荐）
如果你是vue3，而且基于
vite创建项目,安装好nodejs，可直接在cmd执行该命令创建项目,不用安装webpack、vue-cli
# 创建vue3项目
# 在要创建项目的文件夹下执行# npm
npm create vue@latest
# yarn
yarn create vue
方式二（以前老的可以创建vue2和vue3）
# 创建vue2或者vue3项目
# 在要创建项目的文件夹下执行
vue create 项目名# 指定包管理器 yarn
vue create --package-manager yarn 项目名
# 指定包管理器 npm
vue create --package-manager npm 项目名
第一行：自动创建vue3
第二行：自动创建vue2
第三行：手动选择功能（自定义搭建）
包管理器Yarn 1 安装
1、使用Yarn 1会在项目中生成 yarn.lock文件
# 查看默认包管理器是npm 还是 yarn
查看 C:\Users\用户名 中的 .vuerc 文件中的 packageManager 字段 值# 全局安装
npm install -g yarn# 查看yarn版本
yarn --version# 全局安装目录
yarn config set global-folder D:\Yarn\yarn_global# 设置全局 bin 目录
yarn config set prefix D:\Yarn\yarn_global\bin# 缓存目录
yarn config set cache-folder D:\Yarn\yarn_cache# 查看当前源
yarn config get registry# 修改为淘宝镜像源
yarn config set registry https://registry.npm.taobao.org# 环境变量（win系统）
在【系统变量】 Path 中添加：D:\Yarn\yarn_global\bin# 安装
yarn add axios
# 卸载
yarn remove axios
npm 切换 Yarn 1
1、全局安装 yarn 1
2、删除掉原本项目中的 node_modules 文件夹
3、删除package-lock.json 文件
4、yarn install
Yarn 1 切换 npm
1、删除掉原本项目中的 node_modules 文件夹
2、删除 yarn.lock 文件
3、npm install