Mac搭建vue环境

### macOS Vue 3 开发环境配置教程 #### 安装 Xcode 命令行工具 为了确保开发环境中拥有必要的编译器和其他工具，建议先安装 Xcode 的命令行工具。可以通过终端输入以下命令来完成安装： ```bash xcode-select --install ``` #### 配置 Homebrew 包管理器 Homebrew 是 macOS 上非常流行的包管理和软件安装工具。通过它能够方便快捷地获取各种依赖项。 在终端中执行下面这条指令以安装 Homebrew: ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 之后可利用 `brew` 来安装 Node.js 和其他所需组件[^2]。 #### 设置 Node.js 运行时环境 Node.js 对于构建基于 JavaScript 或者其框架的应用程序至关重要。对于 Vue 项目来说也不例外。使用 Homebrew 可轻松安装最新版本的 Node.js： ```bash brew install node ``` 验证安装成功与否可通过查看当前已安裝的node版本号来进行确认： ```bash node -v npm -v ``` #### 使用 npm 或 cnpm 安装 Vue CLI 工具 Vue CLI 提供了一套完整的命令行接口用来创建、管理和优化 Vue 应用程序。推荐采用官方提供的 NPM 版本或者国内加速镜像 CNPM 来加快下载速度并提高稳定性。 如果选择使用CNPM，则需先全局安装淘宝NPM镜像客户端： ```bash npm install -g cnpm --registry=https://registry.npmmirror.com ``` 接着就可以借助 cnpm 来安装 vue-cli : ```bash cnpm install -g @vue/cli ``` 最后测试一下是否正确安装了 Vue CLI ： ```bash vue --version ``` #### 创建新的 Vue 3 项目 有了上述准备工作后，现在可以开始建立一个新的 Vue 3.x 项目实例了。进入想要放置项目的文件夹路径下，然后运行如下命令： ```bash vue create my-vue-app ``` 按照提示操作直到完成整个过程。注意这里会询问关于所使用的Vue版本选项，请务必指定为 "Manually select features" 并挑选 Vue 3 支持的相关特性[^1]。 #### 编辑器的选择与插件支持 Visual Studio Code (VSCode) 被广泛认为是最好的轻量级编辑器之一，并且提供了丰富的扩展功能来增强用户体验。针对 Vue 开发而言，安装 Vetur 插件能极大地方便代码编写和调试工作。 #### 启动本地服务器预览效果 当一切准备就绪以后，进入到刚刚新建好的工程根目录里边去，再依次键入这两条语句开启服务端口监听模式以便实时观察页面变动情况： ```bash cd my-vue-app npm run serve ``` 此时浏览器应该自动跳转至 http://localhost:8080 地址处展示默认首页界面；如果没有的话也可以手动访问该链接地址[^3]。