前后端分离可以大大地提高开发效率，主流的解决方案为Vue.js+SpringBoot，这里主要介绍Vue在Mac端的入门教程。软硬件环境为Macbook Air M2+macOS Vantura 13.4.1。
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架，是官方提供的基于 Webpack 的 Vue 工具链。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
还需要提到的，Vue官方页面显示，目前Vue CLI已经处于维护模式，除非你依赖特定的 Webpack 的特性，否则建议使用Vite 开始新的项目，在大多数情况下，Vite 将提供更优秀的开发体验。
一、Node安装
在安装Vue前需要首先安装符合要求的版本的Node.js，Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。
打开Nodejs中国官网http://www.nodejs.com.cn/download.html，选择macOS安装包中对应的ARM64版本的LTS长期维护版本（这里可以根据自己的需要选择，如果对最新版本的内容有要求，也可以选择最新版本）。
下载后打开，按照安装引导一步步进行安装即可。
中途需要同意的各种条款点同意即可，最终会显示安装成功的界面，如下图。
安装成功后右下角点击关闭，然后command+空格，搜索终端并打开，分别输入
% node -v
和
% npm -v
如果出现了对应的版本号，即安装成功。
二、安装Vue CLI
继续在终端中使用命令行进行操作。输入
% sudo npm install -g @vue/cli
然后输入Mac账户的密码（此时终端不会显示输入的密码，不用管它，直接输入即可），这时系统便会自行安装。
在安装过程中会显示很多warning，这是正常现象。在安装完成后，输入
% vue --version
如果出现Vue版本号，即安装成功。
三、创建第一个Vue项目
先在终端中使用cd命令进入到需要创建该项目的位置，笔者的位置为“vue-study”文件夹，然后输入
% vue create hello-world
（其中hello-world是你想要创建项目的名称，可以自定义）
下图提示，输入Y然后回车即可，然后会让你选取一个 preset，可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这里直接选择Vue 3版本的即可。
然后Vue CLI便会自行构建项目，如下图所示，最终会显示“Successfully created project hello-world”，然后要求根据提示输入命令。
分别输入这两行命令后，项目自动开始运行，最终会显示Web页面的Local和Network下的URL。
在浏览器中输入这两个地址中的任意一个，能够顺利打开下图的页面，大功告成！
四、意外情况
笔者在上述过程中，进行到创建Vue项目时，选取preset之后，遇到了error，提示的错误信息为：
Error: command failed: npm install --loglevel error --legacy-peer-deps
这种情况下，在终端输入命令
% sudo npm cache clean --force
然后输入Mac账户的密码，会显示
npm WARN using --force Recommended protections disabled.
如下图所示，此时重新create项目，即可成功。
文章来源：https://www.toymoban.com/news/detail-765429.html
参考资料：
Vue.js官网：https://cn.vuejs.org/
Vue-Cli官网：https://cli.vuejs.org/zh/guide/文章来源地址https://www.toymoban.com/news/detail-765429.html
到了这里，关于Mac OS安装Vue CLI脚手架并创建一个基础项目教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
