经过前面的传统前端开发学习后，我们接下来进行前端的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框架的内容

雄关漫道真如铁，而今迈步从头越