一.前端工程化

前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本

1. NodeJS的安装

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环
境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以
方便地开发服务器端应用程序，如 Web 应用、API、后端服
务，还可以通过 Node.js 构建命令行工具等。

• 打开官网https://nodejs.org/en下载对应操作系统的 LTS版本。
• 双击安装包

• 选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一
下是否安装成功，通过： node -v

2.npm 配置和使用

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven 。

• 安装node，自动安装npm包管理工具！
• 
• 配置全局依赖下载后存储位置

创建一个新的全局依赖存储目录，例如
D:\develop\GlobalNodeModules

• 打开命令行终端，执行以下命令来配置新的全局依赖存储

路径：npm config set prefix "D:\develop\GlobalNodeModules"

• 确认配置已生效，可以使用以下命令查看当前的全局依赖存储路径

npm config get prefix

• 切换npm的淘宝镜像，使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com

• 确认配置已生效，可以使用以下命令查看当前 registry 的配置：

npm config get registry

3. Vue-cli安装

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成
的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了
如下功能：

1.统一的目录结构    2.本地调试
3.热部署    4.单元测试
5.集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

二.Vue项目介绍

1 Vue项目-创建

进入文件夹，的地址目录，在地址栏输入cmd

通过命令先进入到图形化界面，然后再进行vue工程的创建

vue ui

选择创建按钮创建项目，如下图所示

然后预设模板选择手动，如下图所示

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

2 vue项目目录结构介绍

通过VS Code打开之前创建的vue文件夹，打开之后，呈现
如下图所示页面：

vue项目的标准目录结构以及目录对应的解释如下图所示:

• public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
• src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
• assets/目录：用于存放一些项目中用到的静态资源，如
  图片、字体、样式文件等
• components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI部件，方便在不同的场景中进行重复使用
• router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
• vue.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用CommonJS 或 ES6 模块的语法进行配置。
• package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开
  发、构建和启动本地服务器等操作。

3 运行vue项目

第一种方式：通过VS Code提供的图形化界面 ，如下图所示

点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端口，我们直接通过浏览器打开地址

最终浏览器打开后，呈现如下界面，表示项目运行成功

对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：

module.exports = defineConfig({
    transpileDependencies: true,
    devServer:{
        port: 9000
     }
})

第二种方式：命令行方式

直接基于cmd命令窗口，在vue目录下，执行输入命令npmrun serve即可，如下图所示：

补充：NPM脚本窗口调试出来

第一步：通过设置/用户设置/扩展/MPM更改NPM默认配置，如下图所示

然后重启VS Code，并且双击打开package.json文件，然后
点击资源管理器处的3个小点，勾选npm脚本选项，如图所示

然后就能都显示NPM脚本小窗口了。