Mac 安装 vue3 环境
在Mac端安装vue环境稍稍有些麻烦，而且以往的安装教程都是vue3 以下的版本，与新版本有点区别，下面我整理了我的安装流程供有需求的朋侪参考。写在前面：本人环境为 Mac M 系列，版本号 Sonoma 14.5，本教程仅实用于了解网络长城且会魔法的用户，安装 vue3 时请毗连真正的互联网，否则你会在由于下载 nodejs 而绑定下载的 npm 包时碰到漫长的期待时间。
1.vue 是基于 nodejs 的，所以在此之前要先下载 node.js
官网直通车：Node.js — Download Node.js®
打开跳转到这个界面：
https://i-blog.csdnimg.cn/blog_migrate/d00b960ba07f8556a5267de8a7f74d6e.png
可以看到，在这里没有安装包或者压缩包供我们直接下载安装，只有几行命令行，
所以，本次我们的安装都要在 Mac 自带的终端，使用命令行举行操纵。
2.在下载 nodejs 前需要做一些预备工作
command+空格打开聚焦搜索，输入“终端”，回车打开，你会看到一个名为 “你的用户名-Zsh ”的窗口，macOS (10.14 以后）的终端使用的 shell已经从 Bash更换为了 Zsh。
在下载之前，如果你以前没有使用过Homebrew 和 Git（使用过请跳过2，查看 3）
（1）安装 Homebrew：（mac 上的一个包管理器，这里安装是用于下载 git）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 期待完成，安装成功后，输入brew -v，看是否成功安装：
https://i-blog.csdnimg.cn/blog_migrate/1c94c7bb1ab15a6d0f6b0ce652e8e4f9.png
如果输出zsh：command not found字眼，要使用 vim查看是否将 homebrew 放入环境变量：
vim ~/.zshrc
观察是否有这几行环境变量（一般会自动写入，如果没有请手动打进去）：
https://i-blog.csdnimg.cn/blog_migrate/08acede3213b48695e5adab7dc67d927.png
https://i-blog.csdnimg.cn/blog_migrate/a1c8846d53d20c6972d3ceac8909bffd.png
没有则按 i 打开编辑命令，将上面那句添加进去，有则不需要修改，按 esc 键后输入：
（这几步都是vim 编辑器的使用）
:!wq 生存并退出，终端输入：
source ~/.zshrc 使修改生效，再次输入brew -v，应该会正确输出版本号。
（如果老版本 Mac使用的是Bash，则上述全部的~/.zshrc修改为~/.bashrc）
（2）安装 Git：
brew install git 期待成功进入下一步。
3.回到第一步，安装 nodejs
复制官网给的第 2 行和第 5 行：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20 这时相应的环境变量已经自动写入~/.zshrc，不确定的话可以 vim 进去查看，
直接输入：
source ~/.zshrc 更新配置文件
再复制官网第 8 和第 11 行：
node -v
npm -v
这时会正常输出 node 和 nmp 的版本号。
如果执行上面命令出现出现zsh: command not found: node 或者zsh: command not found: npm，就需要执行下面操纵，把环境变量加入：
#终端输入：vim ~/.zshrc
#进入 vim 后按 i 进入编辑模式后输入：PATH=$PATH:/usr/local/bin/#编辑完成后按左上角的 esc 键位进入命令模式输入：:!wq #退出 vim 后要更新配置：source ~/.zshrc 更改环境变量后再次输入相应指令就可以看到正确的版本号输出。
（如果老版本 Mac使用的是Bash，则上述全部的~/.zshrc修改为~/.bashrc）
4.安装 vue
终端执行（vue3 版本已经内置了Webpack，除非特殊需求，否则不必全局安装webpack 了）：
sudo npm install webpack -g 输入开秘密码，期待完成
（1）终端执行安装Vue CLI（脚手架）：
sudo npm install -g @vue/cli 输入密码，期待，你大概会碰到许多警告，不必分析，这只是官方对某些漏洞的提醒：
https://i-blog.csdnimg.cn/blog_migrate/52b8b5176c059c653161f6d234e1bd28.png
末端是这样的就可以：
https://i-blog.csdnimg.cn/blog_migrate/4a91e999e65f23c566cdfa44b85859d8.png
（2）终端执行（vue3 支持 UI 界面，下面的命令可以启用它，直接图形化操纵 vue项目）：
vue ui 这时会成功在你的浏览器打开一个vue 的项目管理器,你可以很方便的管理你的 vue 项目：
https://i-blog.csdnimg.cn/blog_migrate/2e1fdbdb2ee1f460b4f884ee350b1bab.png
（3）不需要使用时，请回到终端，按control+C 停止 vue 服务，此时可以输入：
vue -V 会返回安装的 Vue CLI 的版本号。
5.命令行方式创建一个 vue 项目： 由于 ui 界面只能管理你的项目，而不能直接对源代码举行修改，所以这里讲讲如何使用命令行以及vscode 等编辑器，使用Vue CLI创建一个新的Vue项目。
（1）这个命令会引导您通过一些选项，例如选择预设配置：
vue create my-project
#可以替换my-project为您想要的项目名称ps：如果创建时报错，基本就是权限错误，大概率就是因为我之前图方便使用了 sudo 指令运行 npm 命令导致的，不外我们可以终端输入指令调停：
我的用户 id 是501，组 id 是20，用户名（个人目录名）是Xiaowangbb
#这里的501和20一般都是这个，除非你有多个用户个用户群组
#只需要相应修改你的个人级目录名即可
sudo chown -R 501:20 "/Users/Xiaowangbb/.npm"之后重新执行创建操纵，Overwrite覆盖上一次创建时的项目即可。
（2）进入项目文件夹，并启动开发服务器：
cd my-project
npm run serve这会启动一个本地开发服务器，并且通常会在http://localhost:8080上可用：
https://i-blog.csdnimg.cn/blog_migrate/c67c3775ea924c03eab93103eaefe35c.png
（3）然后打开 vscode 等代码编辑器，就可以查看并管理你的vue项目源码：
https://i-blog.csdnimg.cn/blog_migrate/f635c1752d0bc306a6acf627c73dd7b6.png
末了，感谢您的阅读。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]