Vue 3 环境安装指南
本指南详细记录了在macOS系统上安装Vue 3开发环境的完整步骤。
1. 安装Xcode命令行工具
首先需要安装Xcode命令行工具，这是开发环境的基础：
xcode-select --install
执行该命令后，会弹出安装对话框，按照提示完成安装即可。
2. 安装nvm (Node Version Manager)
使用curl命令安装nvm，用于管理Node.js版本：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
3. 配置nvm环境变量
将nvm环境变量添加到zsh配置文件中：
# 添加NVM_DIR环境变量
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
# 添加nvm加载脚本
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.zshrc
# 重新加载配置文件
source ~/.zshrc
验证nvm是否安装成功：
nvm --version
# 输出: 0.39.7
4. 安装Node.js LTS版本
使用nvm安装最新的Node.js长期支持版本：
nvm install --lts
安装完成后，可以验证Node.js和npm版本：
node --version
# 输出: v22.18.0
npm --version
# 输出: v10.9.3
4.1 配置npm源（可选）
为了加快npm包的下载速度，可以配置国内的npm源。我们可以使用nrm（npm源管理器）来管理和切换npm源。
安装nrm
npm install -g nrm
列出可用的npm源
nrm ls
输出类似：
* npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
tencent ---- https://mirrors.cloud.tencent.com/npm/
cnpm ------- https://r.cnpmjs.org/
taobao ----- https://registry.npmmirror.com/
npmMirror -- https://skimdb.npmjs.com/registry/
切换到淘宝源
nrm use taobao
验证源是否切换成功
npm config get registry
输出：https://registry.npmmirror.com/
5. 安装Vue CLI
使用npm全局安装Vue CLI：
npm install -g @vue/cli
验证Vue CLI是否安装成功：
vue --version
# 输出: 5.0.8
6. 创建Vue项目
使用Vue CLI创建一个新的Vue项目，使用默认配置：
vue create -d my-vue-app
7. 启动Vue开发服务器
进入项目目录并启动开发服务器：
cd my-vue-app && npm run serve
服务器启动后，可以通过以下地址访问应用：
- 本地地址: http://localhost:8080/
- 网络地址: http://10.0.209.117:8080/
8. 后续开发命令
- 停止服务器: 按
Ctrl + C - 再次启动服务器: 在项目目录下运行
npm run serve - 构建生产版本:
npm run build - 运行测试:
npm run test
项目结构
创建的Vue项目结构如下：
my-vue-app/
├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public/
│ ├── favicon.ico
│ └── index.html
├── src/
│ ├── App.vue
│ ├── assets/
│ ├── components/
│ └── main.js
└── vue.config.js
恭喜！您已成功完成Vue 3开发环境的配置。
