Mac 安装 vue3 环境

在Mac端安装vue环境稍稍有些麻烦，而且以往的安装教程都是vue3 以下的版本，与新版本有点区别，下面我整理了我的安装流程供有需求的朋侪参考。
 
写在前面：本人环境为 Mac M 系列，版本号 Sonoma 14.5，本教程仅实用于了解网络长城且会魔法的用户，安装 vue3 时请毗连真正的互联网，否则你会在由于下载 nodejs 而绑定下载的 npm 包时碰到漫长的期待时间。

1.vue 是基于 nodejs 的，所以在此之前要先下载 node.js
官网直通车：Node.js — Download Node.js®
打开跳转到这个界面：

可以看到，在这里没有安装包或者压缩包供我们直接下载安装，只有几行命令行，
所以，本次我们的安装都要在 Mac 自带的终端，使用命令行举行操纵。

2.在下载 nodejs 前需要做一些预备工作
command+空格打开聚焦搜索，输入“终端”，回车打开，你会看到一个名为 “你的用户名-Zsh ”的窗口，macOS (10.14 以后）的终端使用的 shell已经从 Bash更换为了 Zsh。
在下载之前，如果你以前没有使用过Homebrew 和 Git（使用过请跳过2，查看 3）
（1）安装 Homebrew：（mac 上的一个包管理器，这里安装是用于下载 git）

1. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

复制代码

期待完成，安装成功后，输入brew -v，看是否成功安装：

如果输出zsh：command not found字眼，要使用 vim查看是否将 homebrew 放入环境变量：

1. vim ~/.zshrc

复制代码

观察是否有这几行环境变量（一般会自动写入，如果没有请手动打进去）：

没有则按 i 打开编辑命令，将上面那句添加进去，有则不需要修改，按 esc 键后输入：
（这几步都是vim 编辑器的使用）

1. :!wq

复制代码

生存并退出，终端输入：

1. source ~/.zshrc

复制代码

使修改生效，再次输入brew -v，应该会正确输出版本号。
（如果老版本 Mac使用的是Bash，则上述全部的~/.zshrc修改为~/.bashrc）

（2）安装 Git：

1. brew install git

复制代码

期待成功进入下一步。

3.回到第一步，安装 nodejs
复制官网给的第 2 行和第 5 行：

1. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
3. nvm install 20

复制代码

这时相应的环境变量已经自动写入~/.zshrc，不确定的话可以 vim 进去查看，
直接输入：

1. source ~/.zshrc

复制代码

更新配置文件
再复制官网第 8 和第 11 行：

1. node -v
3. npm -v

复制代码

这时会正常输出 node 和 nmp 的版本号。
如果执行上面命令出现出现zsh: command not found: node 或者zsh: command not found: npm，就需要执行下面操纵，把环境变量加入：

1. #终端输入：vim ~/.zshrc
2. #进入 vim 后按 i 进入编辑模式后输入：PATH=$PATH:/usr/local/bin/#编辑完成后按左上角的 esc 键位进入命令模式输入：:!wq #退出 vim 后要更新配置：source ~/.zshrc

复制代码

更改环境变量后再次输入相应指令就可以看到正确的版本号输出。
（如果老版本 Mac使用的是Bash，则上述全部的~/.zshrc修改为~/.bashrc）

4.安装 vue
终端执行（vue3 版本已经内置了Webpack，除非特殊需求，否则不必全局安装webpack 了）：

1. sudo npm install webpack -g

复制代码

输入开秘密码，期待完成
（1）终端执行安装Vue CLI（脚手架）：

1. sudo npm install -g @vue/cli

复制代码

输入密码，期待，你大概会碰到许多警告，不必分析，这只是官方对某些漏洞的提醒：

末端是这样的就可以：

（2）终端执行（vue3 支持 UI 界面，下面的命令可以启用它，直接图形化操纵 vue项目）：

1. vue ui

复制代码

这时会成功在你的浏览器打开一个vue 的项目管理器,你可以很方便的管理你的 vue 项目：
​​​​​​​

（3）不需要使用时，请回到终端，按control+C 停止 vue 服务，此时可以输入：

1. vue -V

复制代码

会返回安装的 Vue CLI 的版本号。

   5.命令行方式创建一个 vue 项目：     由于 ui 界面只能管理你的项目，而不能直接对源代码举行修改，所以这里讲讲如何使用命令行以及vscode 等编辑器，使用Vue CLI创建一个新的Vue项目。
  （1）这个命令会引导您通过一些选项，例如选择预设配置：

1. vue create my-project
2. #可以替换my-project为您想要的项目名称

复制代码

ps：如果创建时报错，基本就是权限错误，大概率就是因为我之前图方便使用了 sudo 指令运行 npm 命令导致的，不外我们可以终端输入指令调停：
  我的用户 id 是501，组 id 是20，用户名（个人目录名）是Xiaowangbb

1. #这里的501和20一般都是这个，除非你有多个用户个用户群组
2. #只需要相应修改你的个人级目录名即可
3. sudo chown -R 501:20 "/Users/Xiaowangbb/.npm"

复制代码

之后重新执行创建操纵，Overwrite覆盖上一次创建时的项目即可。
  （2）进入项目文件夹，并启动开发服务器：

1. cd my-project
2. npm run serve

复制代码

这会启动一个本地开发服务器，并且通常会在http://localhost:8080上可用：

  （3）然后打开 vscode 等代码编辑器，就可以查看并管理你的vue项目源码：

  末了，感谢您的阅读。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。