【前端学习指南】第二站 Vue 工程化开发

本文链接：https://blog.csdn.net/weixin_52058417/article/details/135034023

🍭 Hello，我是爱吃糖的范同学

🔴 想把自己学习技术的经历和一些总结分享给大家！

🔴 通过这样的方式记录自己成长，同时沉淀自己的技术，我会把所有额外的时间和经历投放到CSDN和公众号（💥公号名：AIRC Team💥，欢迎关注，为大家准备了很多有关编程学习资料）文章的撰写。

🔴 希望能通过这样的方式让大家认识我，和我一起学习编程，共同进步！😃

希望能和大家一起进步和成长！坚持热爱！🎉🎉🎉

4.1 父组件 -> 子组件（Props）：

4.2 子组件 -> 父组件（$emit()）

📌 工程化开发概述：

在之前的旅程中，我们采用的都是使用 HTML 文件通过引入 Vue 核心包的方式来开发 Vue 页面。但是在工作中，我们通常不会采用这样的方式完成企业级项目。这里就不得不提到另一种企业中使用得开发方式 - 工程化开发。

工程化开发模式：基于构建工具（例如 Webpack 等）的环境中开发基于 Vue 的项目。

工程化开发有什么好处吗？

好处包括但不限于：

开发提效：能更加快速开发前端项目，更多聚焦于业务实现，减少繁杂的配置。
代码质量：使用代码规范和静态分析工具来减少错误和代码重复。
可维护性：模块化代码、依赖管理和自动化测试使项目更易维护。
性能优化：优化和压缩代码，减小文件大小，提高加载速度。
自动化：通过自动化构建、测试、部署等任务，减少手动工作，提高效率。
团队协作：版本控制和代码合并使多人协作更容易。

前端工程化的整体流程：

可是前端工程化不仅仅只是学习一个 Webpack，Vue CLI，Vite 等等打包构建工具，而是针对前端系统的一整套开发运维全流程。是从如何开始创建项目，写出第一行代码，到如何构建，如何发布测试，如何上线部署，如何监控等等一系列流程。

流程中的每一个步骤我认为都需要学习和了解，因此后面会对其中的每个模块进行详细的解析，这里我们只需要简单的了解工程化开发的步骤就可以啦 ~ 🎉

📌 Vue CLI 脚手架：

1.Vue CLI 概述：

Vue CLI 是 Vue 官方提供的一个全局命令工具。可以帮助我们快速创建一个开发用的 Vue 项目的标准框架。其中内置集成了 Webpack。

使用 Vue CLI 的好处就在于不用再对 Webpack 进行配置，拿来安装即可使用，快速创建一个可以使用的 Vue 工程，直接就能上手开发项目。

2.Vue CLI 安装：

首先，安装 Vue CLI 需要在本地配置好 Node 环境。可以参考这篇文章哟：

【前端学习指南·番外篇】Node.js 安装及环境配置_nodejs安装及环境配置和前端运行-CSDN博客https://krian.blog.csdn.net/article/details/122486460 使用 npm 进行安装，只需要全局安装一次即可。执行以下指令，全局安装 Vue CLI：

npm install -g @vue/cli

等待安装完成之后，查看 Vue CLI 的版本号，判断 CLI 脚手架是否安装成功：

vue --version

如果能正常出现版本号，证明安装成功：

3.Vue CLI 创建项目：

首先需要在本地创建一个目录，在这个目录中打开 CMD 窗口，在 CMD 窗口中执行以下命令：

vue create 项目名

注意，项目名不能是中文。然后根据提示选择要创建工程类型，主要是 Vue2 和 Vue3 的区别。

执行如下命令将 Vue 项目运行起来：

npm run serve

使用 Vue CLI 创建的项目中会自动创建如下的文件：

其中 main.js 是作为整个项目的入口文件，什么是入口文件？？？类似于 main方法，编译器在执行过程中会首先找到这个文件，从这个文件开始进行解析编译运行。

在 main.js 中包含了三部分核心代码，首先是对 Vue 实例的引入，由于组件都是基于单页面开发，使用的都是同一个 Vue 实例，这个实例是在 main.js 中进行创建的。然后，在 Vue 实例上我们挂载了 App.vue 根组件，我们所编写的内容都是基于这个组件渲染的。最后，就是将 App.vue 根组件渲染到渲染到 index.html 容器中。