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