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
