經過前面的傳統前端開發學習后，我們接下來進行前端的VUE-JS框架學習（寫這篇文章的時候VUE-JS最新版是VUE3，所以默認為VUE3即可）

首先，我們要配置Node-JS環境，雖然我們還不學習Node-JS但是Node-JS可以快速配置我們的VUE-JS框架，所以本期內容主要以Node-JS環境配置為主

Node-JS下載

官網：https://nodejs.cn/en/download

? ? ? ??https://nodejs.cn/download/

給大家推薦一個適合新手配置的方法

下載zip文件

或者

然后解壓（這個應該都會，因為是zip文件直接雙擊進去然后托在桌面上就行）

環境配置

接下來配置環境（我的電腦是windows10，可能會和你們的不一樣）

打開"設置">"系統">"系統信息">"高級系統設置"

接下來配置環境

（拓展一下用戶變量和系統變量的區別：用戶變量是針對特定用戶定義的，只在該用戶的會話或程序中有效；系統變量是全局性的，對整個系統或所有用戶都有效。）

因為我電腦的語言比較多，擔心污染環境就在用戶變量里面改了

選中"path"后直接"編輯"，然后點"新建"把Node-js文件路徑加進去就行

（我以前配的，所以和你們看見的版本應該不一樣）

測試

可以看到出現版本號了，說明沒問題

換源

接下來換源（就是從一個官方的代碼倉庫切換到鏡像倉庫，目的是為了加快下載速度、提高開發效率或解決網絡訪問問題，類似于之前配置過的皮卡丘靶場docker版本）

給nodejs換源實際上是給npm包（一個下載開源框架的庫）換源，所以只看npm就行

我們先來看現在的源：輸入

npm config?get?registry

（默認應該是官方源，也能用，但是可能會有點慢）

接下來我們換其它源：

npm config?set?registry https://registry.npm.taobao.org

或者換個自己喜歡的源

淘寶源：
https://registry.npm.taobao.org
阿里云源：
https://npm.aliyun.com
騰訊源：
https://mirrors.cloud.tencent.com/npm/
npm 鏡像源：
https://registry.npmmirror.com

完成

接下來就是配置一個VUE-JS框架了

介紹下VUE-JS各個構建方式的優缺點

Vue CLI（適合企業級項目）：穩定全面但是體積大

安裝：npm install -g @vue/cli
構建：vue create <自定義名稱>

Vite-vue（輕量級項目）速度爆炸，體積小，但是對應的就是不成熟，復雜項目困難

構建：npm?create?vite@latest?<自定義名稱>?-- --template vue

定制化（高手專用）自定義但是對于新手很難

npm init -y
npm install vue

我們在接下來的內容里以Vue CLI為主內容，因為市面上大部分都是用的這個，而且比較全面，方便后期理解一些開源項目

至于細節的配置：

介紹

1. Babel
含義：Babel 是一個 JavaScript 編譯器，主要用于將現代 JavaScript（ES6+）代碼轉換為向后兼容的 JavaScript 版本（如 ES5），以確保代碼能夠在舊版本的瀏覽器中運行。
是否需要：如果你的項目需要支持舊版本瀏覽器（如 IE11），或者你使用了 ES6+ 的新特性（如 
async/await、
class 等），那么 Babel 是必要的。
2. TypeScript
含義：TypeScript 是一種靜態類型語言，它是 JavaScript 的超集，添加了類型系統、接口、類等特性，能夠幫助開發者更好地管理大型項目，減少錯誤。
是否需要：如果你希望在開發過程中獲得更好的代碼提示、類型檢查和重構支持，或者你的團隊更傾向于使用類型系統，那么可以選擇 TypeScript。
3. Progressive Web App (PWA) Support
含義：PWA 是一種通過漸進式增強技術構建的 Web 應用，它可以通過緩存、離線支持、推送通知等功能，提供類似原生應用的用戶體驗。
是否需要：如果你希望你的應用能夠在離線環境下使用，或者需要推送通知等功能，那么可以啟用 PWA 支持。
4. Router
含義：Vue Router 是 Vue.js 的官方路由管理器，用于實現單頁面應用（SPA）中的頁面導航和路由管理。
是否需要：如果你的項目是一個多頁面的單頁面應用（SPA），那么需要使用 Vue Router 來管理頁面跳轉。
5. Vuex
含義：Vuex 是 Vue.js 的狀態管理庫，用于集中管理應用的狀態，特別是在大型項目中，Vuex 可以幫助開發者更好地管理全局狀態。
是否需要：如果你的項目中存在多個組件需要共享狀態（如用戶登錄狀態、購物車數據等），那么可以使用 Vuex。
6. CSS Pre-processors
含義：CSS 預處理器（如 Sass、Less、Stylus）是用于擴展 CSS 功能的工具，它們提供了變量、嵌套規則、混合等功能，使 CSS 更易于編寫和維護。
是否需要：如果你希望使用更強大的 CSS 編寫方式，或者你的團隊對 CSS 預處理器有偏好，那么可以選擇啟用。
7. Linter / Formatter
含義：Linter 是用于檢查代碼質量問題的工具（如 ESLint），Formatter 是用于格式化代碼的工具（如 Prettier）。它們可以幫助團隊保持一致的代碼風格，減少代碼錯誤。
是否需要：強烈建議啟用！這有助于提高代碼質量，減少團隊成員之間的代碼風格沖突。
8. Unit Testing
含義：單元測試是針對代碼中的最小單元（如函數、組件）進行測試，以確保它們的正確性。Vue.js 的單元測試通常使用 Jest 或 Mocha 等框架。
是否需要：如果你希望提高代碼的可靠性和可維護性，或者你的項目需要持續集成（CI），那么單元測試是很有幫助的。
9. E2E Testing
含義：端到端測試（E2E Testing）是模擬用戶在瀏覽器中的真實操作，測試整個應用的流程是否正常。常用的工具是 Cypress 或 Playwright。
是否需要：如果你希望確保用戶在實際使用過程中不會遇到問題，或者你的項目對質量要求較高，那么可以啟用 E2E 測試。

本系列內容使用

Please pick a preset: Manually select features
Check the features needed for your project: Babel, TS, Router, Linter
Choose a version of Vue.js that you want to start the project with 3.x
Use class-style component syntax? No
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
Use history mode for router? (Requires proper server setup for index fallback in production) Yes
Pick a linter / formatter config: Prettier
Pick additional lint features: Lint on save
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
Save this as a preset for future projects? No

至此，配置完成，大家可以先觀察一下VUE和傳統前端的區別，下一篇來講解VUE框架的內容

雄關漫道真如鐵，而今邁步從頭越