前后端分離可以大大地提高開發(fā)效率，主流的解決方案為Vue.js+SpringBoot，這里主要介紹Vue在Mac端的入門教程。軟硬件環(huán)境為Macbook Air M2+macOS Vantura 13.4.1。
Vue (發(fā)音為 /vju?/，類似 view) 是一款用于構(gòu)建用戶界面的 JavaScript 框架，是官方提供的基于 Webpack 的 Vue 工具鏈。它基于標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡單還是復(fù)雜的界面，Vue 都可以勝任。
還需要提到的，Vue官方頁面顯示，目前Vue CLI已經(jīng)處于維護(hù)模式，除非你依賴特定的 Webpack 的特性，否則建議使用Vite 開始新的項(xiàng)目，在大多數(shù)情況下，Vite 將提供更優(yōu)秀的開發(fā)體驗(yàn)。
一、Node安裝
在安裝Vue前需要首先安裝符合要求的版本的Node.js，Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)。
打開Nodejs中國官網(wǎng)http://www.nodejs.com.cn/download.html，選擇macOS安裝包中對應(yīng)的ARM64版本的LTS長期維護(hù)版本（這里可以根據(jù)自己的需要選擇，如果對最新版本的內(nèi)容有要求，也可以選擇最新版本）。
下載后打開，按照安裝引導(dǎo)一步步進(jìn)行安裝即可。
中途需要同意的各種條款點(diǎn)同意即可，最終會(huì)顯示安裝成功的界面，如下圖。
安裝成功后右下角點(diǎn)擊關(guān)閉，然后command+空格，搜索終端并打開，分別輸入
% node -v
和
% npm -v
如果出現(xiàn)了對應(yīng)的版本號，即安裝成功。
二、安裝Vue CLI
繼續(xù)在終端中使用命令行進(jìn)行操作。輸入
% sudo npm install -g @vue/cli
然后輸入Mac賬戶的密碼（此時(shí)終端不會(huì)顯示輸入的密碼，不用管它，直接輸入即可），這時(shí)系統(tǒng)便會(huì)自行安裝。
在安裝過程中會(huì)顯示很多warning，這是正?，F(xiàn)象。在安裝完成后，輸入
% vue --version
如果出現(xiàn)Vue版本號，即安裝成功。
三、創(chuàng)建第一個(gè)Vue項(xiàng)目
先在終端中使用cd命令進(jìn)入到需要?jiǎng)?chuàng)建該項(xiàng)目的位置，筆者的位置為“vue-study”文件夾，然后輸入
% vue create hello-world
（其中hello-world是你想要創(chuàng)建項(xiàng)目的名稱，可以自定義）
下圖提示，輸入Y然后回車即可，然后會(huì)讓你選取一個(gè) preset，可以選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset，也可以選“手動(dòng)選擇特性”來選取需要的特性。這里直接選擇Vue 3版本的即可。
然后Vue CLI便會(huì)自行構(gòu)建項(xiàng)目，如下圖所示，最終會(huì)顯示“Successfully created project hello-world”，然后要求根據(jù)提示輸入命令。
分別輸入這兩行命令后，項(xiàng)目自動(dòng)開始運(yùn)行，最終會(huì)顯示W(wǎng)eb頁面的Local和Network下的URL。
在瀏覽器中輸入這兩個(gè)地址中的任意一個(gè)，能夠順利打開下圖的頁面，大功告成！
四、意外情況
筆者在上述過程中，進(jìn)行到創(chuàng)建Vue項(xiàng)目時(shí)，選取preset之后，遇到了error，提示的錯(cuò)誤信息為：
Error: command failed: npm install --loglevel error --legacy-peer-deps
這種情況下，在終端輸入命令
% sudo npm cache clean --force
然后輸入Mac賬戶的密碼，會(huì)顯示
npm WARN using --force Recommended protections disabled.
如下圖所示，此時(shí)重新create項(xiàng)目，即可成功。
文章來源：http://www.zghlxwxcb.cn/news/detail-765429.html
參考資料：
Vue.js官網(wǎng)：https://cn.vuejs.org/
Vue-Cli官網(wǎng)：https://cli.vuejs.org/zh/guide/文章來源地址http://www.zghlxwxcb.cn/news/detail-765429.html
到了這里，關(guān)于Mac OS安裝Vue CLI腳手架并創(chuàng)建一個(gè)基礎(chǔ)項(xiàng)目教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
