前端所谓的全栈和大前端有什么区别？

抢后端饭碗和抢 App 端饭碗的区别。

看图应该够了，讲点和提问直接的回答。

前端全栈：分node全栈和其他语言全栈，比如ror搞全栈是最早的，其他php、java也有，不过纯前端的不过，在react，angular之前搞后台还是可以的。所以前端全栈，我理解是等同于node全栈的。node本身是做后端的，但在前端工程化和BFF领域大放异彩，所以node全栈涵盖了前端的方方面面，是比较合理的解释。

大前端：更泛化的概念，移动互联网时代开启后，hybrid曾经很火，基于h5和webview做跨端，确实是很理想的做法，但复杂交互搞不定，机器性能网络等是硬伤，所以后来出现了rn和weex，整体还是前端写法，所以hybrid里前端也是占了一定的开发，结合之前前端和node的关系，综合3者：1）app里的前端，2）前端，2）node全栈，统称为大前端。这里的”大“含义是可以做的事儿的范围更广，触达前后端移动端，对前端职责有明显提升。随着技术发展，基于electron的桌面开发也日进流程，ott和iot等领域采用js也愈来愈多，所以只要和用户直接触达的端采用了前端技术开发的都涵盖在大前端范畴内。

至此，上图，应该就比较好理解了。写《狼书》的时候是很纠结的，node的应用范围还是相当广的，取舍不易，理清更难，也算是一个总结吧。

全栈是岗位，而大前端是部门

大前端

作为一名真的大前端，能开发的类别应用大概列举一下，万变不离其宗的JS：

• PC端：web (桌面端浏览器页面)、electron (PC桌面应用)、browser plugin (浏览器插件)、Node.js (工具开发、npm包、前端工程化等)、webpack、gulp
• 移动端：微信小程序、快应用、支付宝小程序、百度小程序、字节跳动小程序等等前端移动端平台；甚至可以是跨端应用，比如MUI、uniapp等
• 框架角度：VUE、React、jQuery等等

全栈

以前我理解中的全栈基本是前端和服务端都可以做，但是近两年，改变了：产品 + 设计 + 开发(前后端) + 运维 + 运营，全栈基本能做独立开发了。

• 前端：能写各平台应用，参造上方的大前端内容
• 服务端：nodejs、java、php、go、Python等任何一门工具，都可以，主要做为前端数据的来源
• 设计：sketch、photoshop、ae、pr等的使用，能设计出符合用户体验的UI
• 其他：变现等等

技术迭代很快，观念迭代也快！广度和深度慢慢拓展！

前端再大也还是前端，只是广度横向扩展，全栈是深度。

为什么韩国是发达国家？是因为这么个”小国“拥有完整的工业产业链。造手机、造汽车、造轮船、造芯片，人家是全栈。为什么俄罗斯不是发达国家？因为这么个”大国“已经没有工业基础了，只能搞个资源出口，它就是前端。

过去的前后端组合只是个小写的" i "，前端只是上面那一点。后来有了大前端，变成了大写的” T “，前端能做的事情多了。后来有了多端(Web、APP)应用，整体架构变成了” Y “。但是不管怎么变，前端无法取代下面那一竖。当然后端也没有停止发展，加上微服务，整体架构变成” 工 “，中间那一竖是Gateway，哈哈哈 。

不知道大家注意到没有。反正我在知乎回答问题以来，经常看到耳机发烧界的问题会标上”前端“这个话题。因为音响发烧界也有前后端的概念。

例如这种问题：

上图的播放器(手机、CD啥都算)是后端，直接插上耳机(算是前端界面)，如果加上一个耳机功放(简称耳放)，算是大前端！一个好的耳放可能比iPhone还贵！但是耳机 + 功放无法取代播放器的作用，因为没有信号源！

大前端=甭管干啥，都用前端那套路数去撸，比如啥都用js，js弄不了的就玩完，俗称脚本小子。

全栈=该用啥撸用啥撸，啥合适用啥撸，啥会用啥撸，俗称打杂的。

前端开发技术栈变化很快，而万变不离其宗的是最基础的部分。

https://devopen.club/course/fefoundation

系列视频课程

#01 技术标准体系以及 ES3, ES5, ES6, ECMAScript 概念

#02 JS 模块化以及 CommonJS、AMD、UMD、CMD 概念

#03 Babel 的使用以及 ES5 与 ES6+ 语法互转

#04 聊聊 TypeScript 的概念与代码实战

#05 TypeScript 环境搭建与代码实战

#06 Webpack 的作用与实战

#07 再看可以开发 Web/移动端/桌面端的 JavaScript

#08 前端三剑客 Angular / React / Vue.js 框架对比

#09 移动端混合开发 Ionic / React Native 框架对比

#10 桌面端 Electron 框架实战

前言

全栈前端的开发可以这样理解，就是将前端和后端的工作 整合起来了，所谓的“栈”包括了网页应用中的各个层次，具体包括了服务器程序、数据结构与模型、用户界面、用户体验等多层次的技术，需要开发者掌握业务中所需要的每一个阶段的技术。

大前端简单来说就是前端和移动端的总称，包括web、Android、IOS等，其主要的还是在于前端的开发上，同时一次的开发就可以同时适用于所有的平台，相比争议比较大的全栈，大前端更加具有可操作性和市场，所以如果要选择学习的方向，建议是向大前端的方向，以下是我总结的大前端的大致路线和相关资源，希望对想学习大前端的同学们有帮助喔~

先放上总体的路线导图

学习前准备：编译器

编译器方面的选择推荐HBuilder X或者Vscode，运行环境在浏览器，推荐是chrome浏览器，当然H-builderX或者Vscode可以安装内置浏览器的插件

【下载地址】

vscode官网： https://code.visualstudio.com

HBuilder X官网： https://www.dcloud.io/hbuilderx.html

【必备插件】

vscode： https://www.php.cn/tool/vscode/475531.html

HBuilder X（由于网上没有看到特别满意的插件推荐，所以分享一下我自己安装的插件）：

根据下列插件在“安装新插件”即可

第一阶段：前端三件套（HTML、CSS、Javascript）

文档教程

【HTML 】w3school教程 : https://www.w3school.com.cn/html/index.asp

【CSS 】w3school教程： https://www.w3school.com.cn/css/index.asp

【JavaScript】w3school教程： https://www.w3school.com.cn/js/index.asp

视频教程

【siki学院】HTML: https://www.sikiedu.com/my/course/206

【siki学院】CSS: https://www.sikiedu.com/course/207

【siki学院】JavaScript： https://www.sikiedu.com/course/212

！注意：原生JS的学习非常重要，在你的原生JS没有达到一定造诣 （比如对原生Js有一个全面的理解，能靠自己独自完成对于一个页面功能的交互等）的时候，不要去盲目的学习其他Js库，不可否认J一些s库是非常优秀的，但它们也是建立于原生Js写出来的，原生Js在面试当中也是占了大头，所以一定要对原生Js有深层的认识后再去拓展。

一些优秀的Js库： https://www.zhihu.com/question/429436558/answer/1594467061

第二阶段：移动端开发&Ajax编程

文档教程

【AJAX】w3school教程：[ https://www.w3school.com.cn/js/js_ajax_intro.asp

(w3school的网页当中能直接输入代码练习，可以直接显示页面效果，挺不错的)

视频教程

【黑马程序员】移动端前端： https://www.bilibili.com/video/BV14J4114768/

【动力节点】最新AJAX: https://www.bilibili.com/video/BV1cR4y1P7B1

第三阶段：前端主流框架

文档教程

【Vue】菜鸟教程： https://www.runoob.com/vue2/vue-tutorial.html

【React】菜鸟教程： https://www.runoob.com/react/react-tutorial.html

【Angular】菜鸟教程： https://www.runoob.com/angularjs/angularjs-tutorial.html

【Bootstrap】菜鸟教程： https://www.runoob.com/bootstrap/bootstrap-tutorial.html

（三大框架一般至少掌握一种，国内用得多的是Vue和React，根据自己的需求学习，如果有时间可以都学一下）

视频教程

【尚硅谷】Vue： https://www.bilibili.com/video/BV1Zy4y1K7SH

【尚硅谷】React： https://www.bilibili.com/video/BV1wy4y1D7JT

【尚硅谷】Angular： https://www.bilibili.com/video/BV1ts411E7qg

【尚硅谷】Bootstrap： https://www.bilibili.com/video/BV1YW411T7yy

第四阶段：node.js全栈开发

不需要特别的深入，最主要是通过学习node.js对于webpack技术在原理上有一个大概的了解

文档教程

【node.js】菜鸟教程： https://www.runoob.com/nodejs/nodejs-tutorial.html

视频教程

【黑马教程】node.js: https://www.bilibili.com/video/BV1a34y167AZ

第五阶段：就业面试相关

HTML高频面试题: https://juejin.cn/post/6905294475539513352

CSS高频面试题: https://juejin.cn/post/6905539198107942919

JavaScript高频面试题（上篇）： https://juejin.cn/post/6940945178899251230

JavaScript高频面试题（下篇）： https://juejin.cn/post/6941194115392634888

Vue高频面试题： https://cloud.tencent.com/developer/article/1675622

React高频面试题： https://blog.csdn.net/sinat_17775997/article/details/82994810

第六阶段：项目实战

小米商城： https://www.bilibili.com/video/BV1gs411c7AC/

网易云音乐： https://www.bilibili.com/video/BV1c44y1g7ac/

哔哩哔哩移动端： https://www.bilibili.com/video/BV1kS4y1b7du

Element-UI： https://www.bilibili.com/video/BV1x64y1S7S7/

写在最后

前端的学习入门并不困难，关键是你能坚持，基础方面非常的重要，如前端三剑客这块，而其中又以JS占据大头，对于原生JS的学习需要尽可能花费大功夫，等知识点烂熟于心时再开启后续的学习是很有必要的，关于JS的总结这一块，可以看一下我写的另外一篇关于JS的文章：

【JavaScript学习要怎么入门呢？】JavaScript知识点导图总结 - 知乎 (zhihu.com)

最后，如果文章有不足的地方可以帮忙指正，希望能帮助到你~

全栈前端和大前端的个人看法

全栈前端：纵向扩展，把后端的部分工作接过来，包括数据二次处理，数据计算，数据持久化等。

大前端：横向扩展，把所有与人交互的技术统一起来。包括但不限于WEB，IOS，Android，MAC桌面应用，Windows桌面应用，Linux桌面应用，Windows Phone APP，智能穿戴设备界面等。（可以参考Xamarin）

区别挺大的一个是纵向的一个是横向的。

全栈是纵向发展，互联网领域前后都通，按照后到前的顺序应该是数据库设计-服务器维护-后端开发-前端开发，不客气的说就是一个人可以撸一整套系统当然是时间允许的情况下。

大前端是横向的在前端领域里面横向扩展，可以搞定各种端的工程师，比如ios、android、pc、web、小程序等等。专注的还是前端，所以是横向扩展。

不管是向哪一个方向发展都是比较难的，要学习的非常多，而且还需要有机会实践。

其实能发展成这样主要还是因为行业竞争力越来越激烈，如果不是多面手很容易被淘汰出局，

二十年前会做个网线调试个交换机路由器，那都很强大了，要是会做个小机什么的都能上天了，那个时候编程都是php java c c++ ，会一样基本就能发家致富了。

现在做网络的要会写脚本、做运维的不仅要会shell、Python 甚至还要会java写个后台管理系统啥的。现在的发展主流是DevOps、全栈、大前端；以后没准会聚合，叫个什么SupDev，一把梭，全带走。

在这个圈子混饭吃喘气就得学习，没得选。

因为考虑到《小白实战大前端：移动端与前端的互通之路》这本书能够让更多的大前端小白同学入门，所以在实体书之外，我把更基础的开发工具IDE的介绍和使用，以知乎文章的方式发布到知乎上，期望除了读者之外可以帮助到更多前端想要学习移动端，移动端想要学习前端的同学。

作为技术人员来讲，大部分工程师都不能脱离IDE独立编程，本部分主要从前端、移动端的两大IDE——Visual Studio Code、Android Studio。介绍了前端、移动端工程师在平时从事开发工作中所用常用IDE功能。IDE作为工程师编码工作中最常用的工具，也是工程师必须要了解的，哪怕技术大神使用的记事本、Vim其实都是IDE的一种。

拓展知识：Vim是从vi发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用.vim的设计理念是命令的组合。用户学习了各种各样的文本间移动/跳转的命令和其他的普通模式的编辑命令，并且能够灵活组合使用的话，能够比那些没有模式的编辑器更加高效的进行文本编辑。同时VIM与很多快捷键设置和正则表达式类似,可以辅助记忆。

但是为了提升开发效率，我们肯定要选用一些功能更加强大，开发更高效，使用体验更高好的IDE。本章我们会介绍两款IDE，也是我们在后续大前端学习编码中几乎每一天都会用到的工具。

A.1 前端常用IDE——Visual Studio Code

前端开发的IDE我们选择一款叫作Visual Studio Code的工具，也常缩写为VSCode。Visual Studio Code由微软提供，目前是被前端开发者使用次数最多的IDE之一，是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Windows、Mac以及Linux。

我们先看一下Visual Studio Code的主界面，如图A-1所示。Visual Studio Code主界面分为三个区域，第一个区域是顶部的菜单栏，几乎Visual Studio Code所有的主要功能都能找到。第二个区域是图A-1中部的展示区，展示区中一般由文件目录区域和代码展示区组成，第三部分就是底部的状态区，状态区一般展示Visual Studio Code当前的工作状态是否有异常，也会提示一些Visual Studio Code插件的下载安装等。

作为技术人员来讲，大部分工程师都不能脱离IDE独立编程，本部分主要从前端、移动端的两大IDE——Visual Studio Code、Android Studio。介绍了前端、移动端工程师在平时从事开发工作中所用常用IDE功能。IDE作为工程师编码工作中最常用的工具，也是工程师必须要了解的，哪怕技术大神使用的记事本、Vim其实都是IDE的一种。

拓展知识：Vim是从vi发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用.vim的设计理念是命令的组合。用户学习了各种各样的文本间移动/跳转的命令和其他的普通模式的编辑命令，并且能够灵活组合使用的话，能够比那些没有模式的编辑器更加高效的进行文本编辑。同时VIM与很多快捷键设置和正则表达式类似,可以辅助记忆。

但是为了提升开发效率，我们肯定要选用一些功能更加强大，开发更高效，使用体验更高好的IDE。本章我们会介绍两款IDE，也是我们在后续大前端学习编码中几乎每一天都会用到的工具。

A.1 前端常用IDE——Visual Studio Code

前端开发的IDE我们选择一款叫作Visual Studio Code的工具，也常缩写为VSCode。Visual Studio Code由微软提供，目前是被前端开发者使用次数最多的IDE之一，是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Windows、Mac以及Linux。

我们先看一下Visual Studio Code的主界面，如图A-1所示。Visual Studio Code主界面分为三个区域，第一个区域是顶部的菜单栏，几乎Visual Studio Code所有的主要功能都能找到。第二个区域是图A-1中部的展示区，展示区中一般由文件目录区域和代码展示区组成，第三部分就是底部的状态区，状态区一般展示Visual Studio Code当前的工作状态是否有异常，也会提示一些Visual Studio Code插件的下载安装等。

从图A-1中我们可以观察到与大多数IDE一样。在顶部菜单栏分为文件、编辑、选择、查看、转到、调试、终端、窗口、帮助。那么这些选项里的功能都是做什么的呢。下面我们就来简单一一介绍一下。这些选项卡里功能主要都是做什么的，如图A-2所示。

文件选项卡中大部分指令不需介绍太多，因为与其他前端或者移动端IDE基本一致，这里要简单介绍一个Visual Studio Code特有的工作区概念。在工作区，你可以对前端项目进行分组处理。如果你想在一个窗口同时进行多个项目的改动和运行时，就需要用到工作区域了，我们可以通过点击“将文件添加到工作区”，把当前项目加入到工作区中，当然也可以添加其他的工作区。工作区存在的意义就是可以把各种环境配置、依赖等区分配置。在保存工作区的时候会生成一份.code-workspace文件。这份文件包含了所有工作区中依赖文件或者项目的工作区配置。打开工作区的时候只能选取这个文件，具体界面如图A-3所示。

第2个要介绍的菜单栏是编辑菜单栏，编辑菜单栏复制、剪切、粘贴等常用IDE功能与其他IDE没有太大差异，快捷键也是Command +功能键（Windows系统下为Ctrl键），具体界面如图A-4所示。

第3个要介绍的菜单栏是选择菜单栏，IDE中内容的选择，其实就是shift+option键位和光标键配合。比如，我想选取光标之前的本行所有内容，只需要按住command+shift+光标左键拖拽好所需要选取的内容就可以完成了。由于与其他IDE如sublime、webstrom等，IDE操作基本一致，就不一一做详细介绍了，具体操作界面如图A-5所示。

第4个要介绍的菜单栏是查看菜单栏，IDE中内容的各种窗口显示都是这个菜单栏控制的，图A-6中右上部分的出现的下拉窗口，就是查看菜单栏中的命令面板，通常情况下，安装Visual Studio Code插件都会用到这个指令。

图A-6右下展示区域是调试、控制台、终端等窗口，其实这些窗口中最常用的就是终端窗口了，如果我们想在控制台中执行一些指令，其实是不用打开Mac系统下的终端（Terminal）窗口的，在Windows操作系统下这个指令通常被我们叫作cmd窗口（在Windows操作系统中打开终端窗口，需要我们打开“开始”按钮，或者按下Windows键，然后点击运行按钮，输入cms后，敲击键盘回车键），直接在Visual Studio Code的终端窗口操作就可以。

至于其他的菜单就不进行详细介绍了，一方面是大多数IDE其实功能都大同小异，另一方面本书也建议大家通过IDE的官方帮助文档进行学习。本书的重点内容还是着重强调移动端和前端的关系，以及如何快速掌握这两种技术。

A.2 移动端常用IDE Android Studio

移动端的IDE我们使用一款叫作Android Studio的IDE，因为1.6节中书中已经介绍了本书的移动端技术是以Android平台为背景的，所以我们选择移动端IDE的时候，Android Studio几乎是必然的结果。Android Studio 是谷歌推出的一个Android集成开发工具，基于IntelliJ IDEA。与之前 Eclipse ADT类似，Android Studio 提供了集成的 Android 开发工具用于开发和调试。（如果使用其他IDE工具开发Android应用的话，需要个人配置ADB以及相关工具。）

接下来观察一下图A-7，也就是Android Studio的主界面，大家可以看到Android Studio主界面大体上可以分为4部分：第一部分是顶部的菜单栏，与大多数IDE一样，基本IDE的所有功能都能在菜单栏中的各种子菜单中可以找到；第二部分是有“小锤子”图标那一行，这其实是把第一部分顶部菜单栏中的最常用功能展示到这里，主要是为了方便Android工程师使用，所以第二部分也叫快捷工具栏；第三部分就是显示区了，显示区的分布与Visual Studio Code几乎一致，也是由文件目录区域和代码展示区组成，只不过在工程师在对Android的界面文件（XML文件）进行编辑时，我们可以在代码区中看到部分预览效果；第四部分也是与Visual Studio Code一样，就是底部的状态区，状态区一般展示Android Studio当前的工作状态是否有异常，也会提示一些Android Studio插件的下载、安装等，但是Android Studio的状态区还有另外一个用途，就是标识我们项目中依赖的工具包的下载进度。

接下来本书会依次介绍Android Studio中的一些关键工具。在Android Studio中我们可以在顶部菜单栏中找到平时开发中所要用到的所有工具。第一个介绍的就是Android Studio菜单栏，如图A-8所示，在Android Studio菜单栏中最重要的功能主要就两个：一个是Check for Updates功能，另一个就是Preferences功能。Check for Updates功能顾名思义就是检查Android Studio的更新的，Android Studio本身的更新还是比较重要的，因为Android Studio在更新之后会带来一些新的快捷功、实验性功能，可以提升开发效率，当然有时候也会带来一些莫名其妙的Bug，比如所有的依赖包都下载了下来了，但是某个特定依赖包不行，或者启动手机模拟器的时候崩溃。所以建议大家在更新自己的Android Studio之前一定要去Android Studio的官方论坛去看看哪个版本是稳定的。

第二个是一个非常重要的菜单Preferences，如图A-9所示，其实该菜单是关于整个Android的设置，为什么说这个菜单重要呢。因为Android Studio项目的编译设置、编辑模板、工具依赖、插件依赖甚至包下载通道（Proxy），以及包管理模式，是否利用离线本地缓存，还是实时从网络下载。都要用到Preferrences，在我们下载完Android Studio之后，默认我们先不对Preferences做任何更改。默认配置足够我们做完本书中所有的Demo示例。

Edit菜单栏中的工具的主要用途是在我们编码过程中使用到的剪切、复制、粘贴等。除此之外，如图A-10中所示，Android Studio还会提供一些额外的快捷功能。比如不用通过选取方式，就能快速复制粘贴光标所在行的Duplicate Line功能，还有Toggle Case这种更改选中部分文本大小写的功能，当然还有很多其他可以增加我们工作效率的功能，我们就不在此一一介绍了。

接下来我们要介绍一下View菜单栏，也就是Android Studio的窗口菜单栏，这部分我们只讲3个最关键的菜单选项，如图A-11中所示，勾选的三个菜单选项，它们分别是Toolbar、Status Bar、Navigation Bar。

ToolBar为工具栏，也是我们开发、调试过程中最常用到的工具。比如：Android App的编译、打包、debug甚至配置下载什么样的Android SDK以及快速开启Android模拟器（主要是开发者在没有真机的情况下进行调试App所用）都在ToolBar中，在我们勾选ToolBar之后，我们就可以在图A-12中展示的，我们框出的部分就是ToolBar工具栏。

Status Bar为状态栏，如图A-13中标记的部分，状态栏主要展示的内容是Android Studio的工作状态，比如Android Studio的版本更新状态，Android Studio项目依赖的包下载状态以及编译进度、编译错误等，所以当我们编译失败、打包失败的时候，均可以通过观察状态区来查看信息和解决问题。

Navigation Bar为导航状态栏，如图A-14中标记的部分，导航状态栏主要展示我们当前访问文件的项目相对路径，并且可以通过点击对应的路径，可以快速定位到当前点击路径位置的文件夹，更能方便我们快速定位文件。

Code（编码）、Analyze（分析）和refactor（重构）这三个菜单栏在平时开发中使用较少，不做介绍。接下来我们要介绍Android Studio中最重要，也是最具特色的两个菜单，一个是Build（构建）菜单，另一个是Run（运行）菜单。

首先介绍Build工具栏，如图A-15所示，在Build工具栏中大部分功能都是与编译相关，比如第一个功能就是Make Project就是编译整个项目，Make Module是编译项目中的某个模块，Clean Project就是删除编译出来的文件，Rebuild Project就是先删除之前编译的文件，然后在根据项目重新编译生成新的文件。

当然以上编译操作都是增量编译（个别早期Android Studio版本为全量编译），那么编译后的文件到底在什么地方呢，如图A-16中标注出来的部分所示。

目在刚刚创建的时候是没有build/generated这个文件夹的，可以说整个build文件夹下都是空的，当我们执行了Make Project或者Rebuild Project等操作后才会出现。就算代码编译完，也没有执行实际的打包，也就是说，还没有打包出APK文件可供安装，如果想得到我们平时在Android操作系统手机上使用的APK安装文件，还需要经历build APK过程。

注意：APK（Android application package，Android应用程序包）是Android操作系统使用的一种应用程序包文件格式，用于分发和安装移动应用及中间件。一个Android应用程序的代码想要在Android设备上运行，必须先进行编译，然后被打包成为一个被Android系统所能识别的文件才可以被运行，而这种能被Android系统识别并运行的文件格式便是APK。 一个APK文件内包含被编译的代码文件(.dex文件)、文件资源（resources）、原生资源文件（assets）、证书（certificates）和清单文件（manifest file）

如果要产出APK，这里就用到了Build菜单栏中的Build APK了，Build APK会把执行Make Project编译好的代码打包成一个.apk后缀的压缩包（是压缩包，可以用解压工具进行解压），具体打包菜单如图A-17标注所示。

那么打包成功之后这个压缩包我们要去哪里找呢，如图A-18所示。我们使用了Build APK（s）把当前项目打包成了一个APK安装包，这个APK安装包的输出地址是在app/build/outputs/debug下。有一个名字叫作app-debug.apk的文件，这个文件就是我们当前Android Studio项目打包出来的安装包。在任何安卓手机上，运行这个APK文件就会弹出Android系统的软件安装界面了。

最后一个要介绍菜单是Run菜单栏，也是我们在开发时候使用频次最高的功能之一，在Run菜单栏中，第一个菜单按钮就是把我们开发的项目编译、打包、并且安装到手机或者模拟器上，如图A-19所示。

那么，我们点击一下看看效果，点击Run之后，会弹出如图A-20的界面，正常情况下每次运行Run都会弹出这个界面，这个操作界面主要是让Android Studio的使用者选择编译出来的App安装到哪一个设备上。图A-20中Available Devices标题下面展示的是虚拟设备，现在可用的虚拟设备是Nexus 5X API R型号的手机虚拟机。

拓展知识：Nexus是Google公司的品牌，Nexus系列产品是Google公司研发的以原生Android为操作系统的智能手机、平板电脑等电子数码产品。同时，Nexus手机和平板电脑是Google为华为、三星、LG、HTC、MOTO、ASUS等合作厂商提供的Android官方设计标准。

当然虚拟机毕竟不是真实的设备，所以我会使用一个真实的手机来进行调试，我选择的是一台魅族MX5的真机。

在使用开发者真机调试的时候，我们要先打开手机的开发者模式，本次打开开发者模式以及本书的真机调试环境均为魅族MX5手机，操作系统依赖为Android 5.1版本。（如果读者使用的为其他Android手机，可以在对应手机官网文档查找打开该手机的开发者模式方法，大多数Android系统手机打开开发者选项的方法都类似）打开开发者模式要分4步来操作。

第一步，打开魅族MX5手机的设置页面，如图A-21所示，然后点击“关于手机”按钮，进入“关于手机”操作页面，如图A-22所示。

第二步，在进入“关于手机”操作页面后，用手指疯狂点击“版本号Flyme 6.2.0.0A”,直到出现“你已处于开发者模式”，如图A-23所示。

这时，手机的开发者模式已经激活，接下来我们要做第三步，回到手机“设置”页面，然后进入到“辅助功能”界面，如图A-24所示。

接下来是第4步，也就是最后一步，打开“开发者选项”和“USB调试”，如图A-25所示，至此我们就打开了手机的调试功能，我们现在已经可以使用Android Studio直接把项目编译到开发机上了。接下来让我们编译一个真正的项目到手机上看一看结果。

现在手机的调试模式、开发者选项都已经启动，接下来我们把手机充电线与电脑相连就会看到如图A-26所示的界面，这个界面是魅族MX5手机连接电脑后，展示的手机文件。

当然也有可能没有弹出这个界面（因为有的人使用的不是魅族MX5手机），也没有关系，我们只需要下载一个Google官方出品的Android文件传输工具就可以了。具体图标如图A-27所示。下载完成之后，重新连接手机与电脑的数据线，就可以看到图A-26的界面了。

当我们连接完调试手机后，接下来就尝试一下真机调试，还是使用Run菜单栏的Run App按钮启动编译、安装项目。紧接着我们就能看到如图A-28所示。

在图A-28中我们可以观察到，在设备栏多了一个叫作Connected Devices的新标题，并且在这个标题下面会出现一个叫作Meizu MX5(Android 5.1,API 22)的设备。这个Meizu MX5(Android 5.1,API 22)设备就是我们刚刚添加的真机或者也可以叫开发机，下文中我们所提到的真机或开发机，均指代Meizu MX5(Android 5.1,API 22）。

代码编译到开发机上之后，就可以在开发机的界面上看到如图A-29的界面。同时我们也可以在开发机的图标页面看到一个新的App图标，如图A-30所示。点击我们标记的App图标后，也可以进入图A-29所展示的界面。

至此，移动端的IDE——Android Studio就介绍到这里，当然Android Studio还有很多功能，需要我们去探索，有需要的可以去查询Android Studio的官方文档，这里只介绍本书中项目样例需要用到的功能。

全栈: 前端+后端

大前端: web端+移动端+小程序端+其他用户端

没什么区别。

打个比方：

前端所谓的“全栈”：

• 街上有个人过来拍拍你的肩膀，等你转过来：“我是你爸爸！”

前端所谓的“大前端”：

• 街上有个人过来拍拍你的肩膀，等你转过来：“我是你妈妈！”

看起来好像有点区别，但是我觉得是没有区别的。痴人说梦的两个派别而已。

这两者都是前端不满足现状，想涉足其他领域，但是又不愿意学习其他中间件和语言的托辞。也是希望于炒出新话题，得到更多话语权的把戏罢了。

当然，要理性看待问题，这两个词的语境中是：

前端所谓的全栈和大前端

那我觉得我说的没错。

但是如果单独说“全栈”和“大前端”这两个词，那么就是中性的。

全栈指可以完成全套程序开发，一般指全套Web程序开发。中间件懂MySQL/SQL Server/Oracle/PostgreDB/TiDB/Redis/Codis/Pika/Kafka/RocketMQ/Pinpoint，Java后端懂Spring Cloud全家桶（Eureka/Consul/Hystrix/Open Feign/Zipkin/Ribbon）/JVM(CMS GC/G1 GC/Concurrent包)，分布式懂XA/Raft/Paxos/柔性事务/PAC/CAS。前端懂ARV/任意一种UI框架/TS/JS/Webpack。这样的人可以被称作全栈。

大前端说的是广度，App叫前端，小程序是前端，Web是前端，Unity3D是前端，DirectX/OpenGL直出也是前端，你控制台打个字符也叫前端。一切和人交互的，都是前端，这就是大前端的思路。

以上。

大前端包含所有 UI，Android、iOS、web、其它专有技术等，都包含。

全栈是前后端甚至包括运维。

全栈，贯穿一个产品的生命周期的所有技术集合：

1. 立项：需求对接
2. 开发：前后端
3. 上线：运维

大前端，就是范围比较广的前端。

因为传统前端分 Web、Android、iOS，而且现在又出了小程序。大前端就是大所有的端开发都包含了，按理来讲桌面开发（windows、linux、macOS）也算。