雨露均沾系列-开启前端玩票之旅

最近心有点儿野，脑洞有点大，手有点儿痒，啥玩意儿都想倒腾倒腾，从网络平台架构到前端设计，从物联网架构到终端设计都想看看其中小门道儿。面对如此多诱人之处，乱花丛中过，岂有不雨露均沾之理？那就开始对这些小门道挨个开启个helloworld之旅。今天先翻前端的牌子。

基本概念介绍

一入前端深似海，乱花渐欲迷人眼。前端要求的是炫酷，是美观，是交互。那用到的工具也是纷繁复杂，十八般武艺，个个牛逼闪闪。遥想当年网页制作三剑客，俱往矣，数风流人物还看今朝。前端技术名词多如牛毛，不厘清怎么装逼。装逼归装逼，毕竟咱是菜鸟，那就先僵化的用用这些概念把。先僵化再优化，啥时候优化看历史发展的进程把。

Node.js

前端啥语言最流行，必然是JavaScript，人称js，虽然名字有Java，但是和Java一毛钱关系没有。我叫马小军，和马云马化腾毛关系没有啊。Node.js是让js运行在服务端的开发平台，基于Chrome V8引擎开发的（英雄不问出处，管它谁开发的，好用就行）。用js开发前端，看来是非使用Node.js 不可。好嘞，前端工具购物车Node.js装进来。

npm、 Yarn

npm是js包管理和分发工具。包可是个好东西，很多通用型的东西做成包，在使用的时候引入进来调用，不用自己写，效果还好，调包侠也是侠，不可小觑。前端技术各种表格图像特效十八般武器，得有东西装。npm既然是包管理工具，那就由npm管理起来把。

天下包有千万种，包包管理工具也有N多种。包包世界里有LV，也有gucci，也有爱马仕。这不，yarn也是一个包管理工具，竞争无处不在啊，它facebook发布的一款取代npm的包管理工具。

正如万物有阴阳，这包管理工具也有优缺点，对于一个初入包管理领域的小菜鸟来说，我还说不清楚npm和yarn这两个大牌的道道儿。我是先知道了npm，本着首因效应的影响，把npm装进咱前端工具购物车。.

React、Vue、Angular

名词真是多啊，这不又蹦出三个。这三个是JavaScript框架，用于前端UI，通过搞点组件啥的让前端的应用丰富多彩。我们页面越来越好看，越来越好用，他们的功劳功不可没。三个框架都各有特点吧，我们选React作为开局。

Webpack

webpack 是一个模块开发工具。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。我们搞好了前端设计，要看看什么样，需要打包运行，而webpack就是这样一个工具。

小结

从概念介绍就可以看到前端是个花枝招展的姑娘，名词也太多了。简单总结一下，我们要设计前端，在js流行的情况下，我们采用js。那么就需要适用于js的开发平台，ok，那就是node.js. 前端是丰富多彩的，有很多包能够达成我们想要的效果，而这些包需要管理工具，如anaconda的包含了很多包的管理工具就更好了，在js的世界里，我们可以选择npm、Yarn。有了平台，有了包管理工具和包，假设前端的时候还需要框架，能让前端的UI更好用，于是可选React，Vue，Angular，设计好了之后，需要发布展示，那么这里可以采用webpack。

思路理了大概齐。光说不练假把式，下面我们来个前端helloworld吧。

环境配置

安装 Node.js，npm

node.js的链接https://nodejs.org/en/，下载，windows下像安装其他软件一样一路安装。下载node完成后，npm也会自行下载完成。通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。
注意：国内用户安装好的npm的源默认是国外的源，会因为网络原因导致执行npm操作有延时，我们可以切换npm的源为淘宝的源镜像。 执行 npm config set registry https://registry.npm.taobao.org。切换完成后，可通过 npm config get registry 查看。

HelloWorld

1. 构建一个react项目。这里有两个方法。

• 第一个方法是根据react官网。步骤如下： . npx create-react-app my-app
  就创建了my-app的文件夹，也就是我们的项目文件夹。第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

• 第二个方法是用npm一步步创建。
  npm install -g create-react-app安装 create-react-app
  create-react-app my-app 创建了my-app项目文件夹。

2. 进入到my-app文件夹。我们看到的文件结构如下：
   node_modules： 这里面包含了react项目中会用到的一些组件 。
   src：里面包含了一些我们自己使用的js文件，css文件，img文件等等
   manifest.json：清单配置文件，声明了项目的名称图标以及入口
   package.json: 包的清单文件，这里面声明的包会通过npm下载到node_modules中

3. 启动项目 npm start
   如果不出意外的话，程序会开启一个服务监听3000端口，并且打开默认浏览器，你会看到一下界面，说明项目已经成功运行。 npm start是开发者模式，如果要部署生产环境中的话，需要bulid，参见官网。
   

参考资料：
react官网
https://www.jianshu.com/p/b28b5d913b97
https://blog.csdn.net/Code_XiaoLu/article/details/80831969?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task