前段时间在公司内部分享了这个主题，目的是希望公司的后端同事们对前端项目能有一个基本认识。今天整理一下，形成这篇文章。
阅读本文，假定你具备一定的 HTML、JS、CSS、JSON，和命令行使用经验。
本文是对我个人经验的一个总结，对于前端新人来讲，可以作为一个“地图”，用来指明一个前端项目都会有哪些部分。为什么叫地图呢，因为这篇文章的作用就跟地图一样，为你指明一个前端项目都会有哪些东西。
我将从项目开发前、开发中，及开发后三个阶段展开来讲。
项目开发前
首先我们来看项目开发前。在开发项目之前，我们需要关心如何获取项目，项目中使用的技术，以及如何将项目运行起来以供本地开发。
必要工具
要开发项目，首先你得要有一个对吧。你可以通过 vue-cli 或者 create-react-app 来创建一个简单的前端项目。或者直接拷贝/ clone 一个现有项目。
上述两个工具以及后续项目开发都需要用到 Node.js，所以你得先安装一个。这里我放上廖雪峰老师的教程。
安装依赖
项目创建好以后呢，在你的项目中找到 package.json 文件，如果用 vscode 打开，你可以通过 cmd + p 或者 ctrl + p 呼出文件搜索功能，然后输入 package.json，敲回车，就可以了。
现在，在 package.json 文件中找到 dependencies 和 devDependencies 两个属性，这两个就是项目中用到的框架及对应的版本。
什么？你问
^和~是什么意思？点这里
了解一下项目中用到了哪些框架以后，用 npm install 来安装所需要的依赖，由于 npm 库地址在国外，国内会遇到一些问题，也可以使用淘宝源来安装，具体看这。
然后，你就会看到项目中多了一个 node_modules 文件夹，这里面放的就是框架相关的代码了。
启动项目
把目光重新放到 package.json 文件中，找到 scripts 这个属性，里面列出了这个项目中，包括启动、构建、测试、代码校验等命令，具体就看项目了。这些命令可以通过 npm run command-name 来使用。
好了，让我们使用 npm run serve 来启动一个 Vue 项目（如果你是用的 vue-cli 创建的话）。
项目开发中
因为我更熟悉 Vue 一些，所以接下来我会用 Vue 项目举例，但是这部分内容在 React（Class 类组件） 项目中也适用。
入口文件
index.html
找到 index.html 文件，找到下面一行代码：
<div id="app"></div>
这个 div 元素，是后续框架挂载组件将会用到的目标元素，其中的 id 的值是可以任意取名，后面会用到这个 id。
main.js
目光放到下面的代码中：
new Vue({
render: h => h(App),
}).$mount('#app')
在 Vue 项目中，就是通过这几行代码，将我们的“页面”挂载到 index.html 上的。我们所有的功能，也都是通过这几行代码来实现。
main.js 文件，也是整个项目的初始化文件，在这个文件中，我们也会做许多整个项目相关的初始化工作。
App.vue
目光放到 h(App) 上。这就是项目启动时，我们挂载到 <div id="app"></div> 上的根应用，后续我们编写的所有页面，可以说都是在这个根应用的基础上进行的。
通过顶部的 import App from './App.vue' 我们即可找到根应用的代码。
组件
就上述这么三个文件，就朗阔了一整个 Vue 前端项目，在单页面应用中，实际上我们开发的都是一个又一个“组件”，用户访问网站，其实访问的就只有 index.html 这个文件，其余的功能，我们都是通过 id 为 app 的元素实现的。
组件的构成
既然我们是在开发组件，那么我们就需要了解如何开发一个组件，先上 App.vue 的代码。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
每一个组件，我们可以拆分成 框架、逻辑、样式 三部分。
框架部分描述了这个组件，或者说这个页面由哪些东西构成；逻辑部分则是用来处理这个页面的逻辑部分，包括页面用到的数据、计算逻辑，以及一些交互功能等；而样式部分则是负责组件的“美化”工作，用来描述各部分都是长什么样子的。
路由
路由的诞生，是为了更好的管理页面之间的切换，即使不用路由，我们也可以通过代码手动实现页面的管控，也就是什么情况下显示哪个页面。
⬆️上面提到了路由的功能，为了完成这个功能，路由通常使用地址来映射不同的“页面”，为了描述这个规则，项目中也就有了一个或多个 router.js 文件来管理这些规则。
生命周期
我选择在这一节中，将组件周期以及 Vue-Router 的守卫放到一起来说。
为了对每一个过程提供定制化功能，所以在组件创建、挂载、更新、销毁，激活，以及跳转对应页面进入某个页面、或 退出某个页面前后等，提供了一系列的 api，来让开发者在各个生命周期之前可以完成一些自己所需要的功能。
状态管理
项目开发无非两种情况，整体或部分。前者是有关整个项目整体的，后者则是跟部分代码相关的。
在组件开发过程中，会遇到相同数据和逻辑重复的情况，于是就催生出一个需要能对整个项目的数据进行一个管控的框架，也就是状态管理框架。
前后端交互
到这里，以上几个部分就已经能很好的完成静态页面的展示了，但是为了给用户提供更好的功能服务，前端还会涉及到与后端服务器之间的通信，那么就必不能少了 axios 等 http 库。
项目开发后
当功能开发完毕以后，就涉及到将项目打包，并部署至服务器上，供用户使用了。
打包
打包这个过程，实际上是将我们的代码”转换“成浏览器可识别的文件类型。在 scripts 中，通常配置了 build 命令，来执行这个转换过程。
PS：这个命令是按照当前代码来执行的，所以如果代码有修改，但是没有提交，是会影响到打包结果的。
执行完这个命令以后，我们在 dist 文件夹里就能看到打包后的结果。
部署
而最后的部署流程，就是将 dist 目录下的文件，上传至我们的服务器，让用户可以访问。
写在最后
最近从别人那里接手了几十个前端项目的运维工作，在交接过程中我关心的更多的是开发前以及开发后的部分，这些项目我能不能进行本地开发；如果要部署，需要如何部署到服务器上；开发环境以及测试环境的代码分别是哪个。
而前端时间接手过小程序以及 uni-app 项目，这些项目里开发中的部分，也基本可以看到上面知识的影子，知道整个程序的入口在哪、组件代码如何编写、页面路由如何管理、请求如何发送，剩下的就是经验积累的过程。
以上就是本次我分享的内容。感谢你付出宝贵的时间阅读。
