‘壹’ 一个后端人员学前端技术的日记（一）开发环境
网上了解了好一阵，好家伙，前端技术完全自成体系，跟后端一样复杂了，什么路由，什么MVC，什么编译打包，什么依赖下载，各种后端用词在前端也都适用了，哎，太难了。
一、学习渠道
1. 中文官网： https://cn.vuejs.org/
开发工具使用火狐，因为谷歌用不了扩展，当然你可能会有办法的。
用火狐浏览器打开： https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
2. 官方文档 ： https://v3.cn.vuejs.org/guide/introction.html
二、环境安装
首先要注意的是，涉及使用cmd命令行执行的，如npm命令等，最好用管理员权限打开cmd，否则说不准后面会出现莫名其妙的错误。
1. 安装nodejs，这个是可以运行js代码的服务端环境，方便本地运行或热部署，这个nodejs包含了npm组件（依赖包管理工具，支持下载、运行、编译、打包等等）
下载地址： https://nodejs.org/zh-cn/
我本地安装的版本是 node-v10.16.3-win-x64，一般安装在 D:Program Files。
2. 安装cnpm组件，为了下载安装包和依赖包更快一点，最好用先安装国内镜像支持，这个组件包含了包含npm大部分功能。
3. 安装Vue/CLI组件，你可以直接使用npm安装，或者安装Vue的CLI，就是脚手架工具，里面包含了Vue本身，建议直接安装这个，省的麻烦。
官网建议Vue3的使用Vue CLI v4.5+，如果版本有问题或升级版本，可以直接去这里删除，全局的库目录在 D:Program Files ode-v10.16.3-win-x64 ode_moles。
4. 创建项目。先命令行转到你要放置项目的目录，执行以下命令。
然后窗口会让你选择是Vue2版本还是Vue3版本的，它还包含默认安装(babel, eslint），我当然选择最新的Vue3安装。
windows下安装注意别用powershell或者git-bash，直接用cmd命令行就好。
结尾出现以下提示，说明你安装成功了。
知识记录1：如果你出现以下问题：
原因是：执行npm命令时没有管理员权限， 用管理员权限打开cmd， 然后再执行npm相关命令即可。
知识记录2：如果你有Vue2，想升级Vue3的最新版本，可操作如下：
5. 额外介绍下，你不一定使用vue脚手架创建vue项目，你还可以使用vite组件创建项目。
官网： https://github.com/vitejs/vite
注意：vite当前只支持vue3.x
名词注释：
脚手架：就是标准的、常见的一种项目目录安排规范。
babel: js的编译器，用了它你就可以像后端开发语言一样对源码进行编译打包了。
eslint：一种js的代码检测工具。
‘贰’ WEB 前端开发环境怎么样
逐字逐句的解释——WEB：web在不同的环境下有不同的解释，其中web前端开发之中的web是指在 Intenet 上和 HTML 相关的部分。通俗来讲，即用网页浏览器浏览的网页。WEB前端开发：这是从网页制作演变而来的，划分了两个很明显的时代特征。早前的网页制作主要都是静态的以浏览为主，制作起来也相对于web前端开发简单，后期发展中，但是静态单一的文字图片已经不满足人们的胃口了，于是web前端开发应运而生。网页上软件化的交互，XHTML+CSS布局、DHTML和Ajax都是涵盖在web前端开发中的，所需学习的也比原先的网页UI制作要多得多了。主要有HTML、CSS和JavaScript，最好还要掌握Flash/Flex、Silverlight、XML和服务器端语言。但是web前端开发所学的知识点并不固定，因为这是一门非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。WEB前端开发工程师web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，在这个过程中要掌握的技能非常多，因为既然能和中下游进行沟通，虽说不至于要精通他们所做的工作，但是也要了解他们手上的事物才能沟通得起来。前端开发工程师的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发工程师是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
‘叁’ 使用ANTD前端开发——开发环境搭建（Windows）
使用ANTD（ant design）开发需要安装Node.JS，cnpm，tyarn，umi等包。yarn是npm的替代品，正如tyarn取代cnpm。在未来的项目中我们会使用tyarn进行JS的包管理。
Node.JS安装成功后，在安装路径下有 npm 命令脚本。npm是Node.JS的包管理器，可以使用npm命令安装各种所需的包。但由于npm包的默认安装源在国外，速度慢，因此需将安装源映射在国内。需要安装cnpm和tyarn。
‘肆’ 解释一下 .net 、VS、VC 和vb.net的开发环境...谢谢！
1. .net是微软的语言架构，是面向对象的托管语言；VS是Visual Studio的缩写，是微软的集成开发环境，通过它可以设计，开发和调试微软平台的程序，其中包括.net，也包括不是.net的程序；VC是Visual C的缩写，是微软版本的C语言，用来开发桌面应用，不能做网站；VB.NET是.net中的一种语言，和原来的VB完全不同，可以用来开发桌面和网站，VB.net的开发环境是VS.net（目前最高版本是vs2008）。
2. 做网站的话，需要安装VS（建议VS2008，因为更加强大），如果用SQL Server的话需要安装SQL Server（建议SQL2008，因为性能更好）。
3. VS2005和VS2008大小差不多，完全安装4G左右，最小安装1G左右
4. 如果使用数据库建议用2008因为2000马上就要停止技术支持了。
‘伍’ 如何打造一个令人愉悦的前端开发环境
以环境作为切入点，开始一系列的前端开发环境配置文章。
主要会涉及到打包、构建、编程工具、debug等等前端环境，以及前后端分离、Nodejs中间层使用伸展面。
工欲善其事必先利其器
以编程工具而言WebStorm、sublime、Atom、VS Code、Brackets等等一大推，这方面我个人是觉得无所谓，萝卜青菜各有所爱，优缺点基本很明显，就看个人的接受情况了，举点例子说下吧：
WebStorm 很全面，无论是纯前端还是Nodejs，包括git、svn、命令行、格式化工具都有，使用顺手之后各种方便，而且还直接支持nodejs的debug，作为前端的全能重量级IDE非常不错，唯一不好的就是太重，体现在内存占有，启动时间上。
sublime 轻量级文本编辑器，3比较2来说有很大提升，小巧灵活是最大的特点，麻烦的是各种插件的配置，需要自己来组合，不熟悉的人用起来远远不想WebStorm方便，快捷。而且每次新的电脑都要配置一次，比较繁琐。(现在有可以导出配置文件来适用新电脑的方法)
Atom类似sublime，比较轻量级，内核主要是Nodejs写出来的，前端各种爱，因为比较适合前端的技术栈，但是大文件的性能问题一直受人诟病，不是很流畅，还有就是插件比起sublime来说还是少了不少，整个生态不如sublime，但是因为是github出的，还是受人青睐不少。我贡献的一个vue格式化插件
VS Code 和 Brackets这两个比较小众，使用的很少，我用过VS，感觉还挺不错，就是生态更差，而且很多插件的说明写的很糟糕，让人看不懂。各方面的资料也比较少。Brackets 一个同事使用过，提示比较好，个人感觉入门很不错。貌似还能及时浏览web效果。
个人建议使用入门的时候使用sublime或者Atom就可以，配置一下自己喜欢的插件，基本就可以开始干活了，当然如果是用eclipse已经很习惯的人，我觉得WebStorm这种重型机枪，可能更适合你。不要对工具的提示产生依赖太过于严重，否则很多东西自己会慢慢遗忘的哦!!!
PS：如果要提升自己的逼格怎么办?请使用VIM或者Emacs这种高逼格的编辑方法。
木牛流马
粮草生产的快，也要有好的运输工具才能上到前线，对于前端而言，属于我们的运输工具是打包构建工具。
打包构建工具经历了各种不同的时代，从服务端主宰的打包构建，到现在前端自己主宰的构建工具，不同的需求产生了各种不同的构建工具，这些工具其实也算前端的工作能力之一，因为每一种新的工具都有优缺点，熟悉的使用也并非特别简单的事情。
先来说说都有哪些不同的种类吧：
后端为主要的整体打包工具，这个以FIS作为代表，大家或多或少都应该知道网络出的这个开源打包构建工具链，从整体上解决了前端工程的问题，包括优化、资源加载、模块打包、自动化、部署一系列问题，从功能上看非常全面，FIS3的升级让人也感觉很是不错，不再依赖PHP和java之类的服务端语言，基于Nodejs来做，更加贴近前端社区。那么缺点是什么呢： 生态环境不够丰富，主要插件应该还是网络自己人提供的，参与进来的社区人数不够多。我觉得这方面的原因是fis2当时对PHP和JAVA的依赖，导致大家对fis的兴趣不弄，错过了最佳时机，这个其实跟网络自己的web的技术栈有很大关系。同时带来的好处是，FIS可以结合PHP做整体网站的部署和构建。以上主要是看文档的一些分析，本人并没有用过FIS，有说错请拍砖。这类的打包构建工具还有很多，大部分都是大公司的内部使用，例如京东、马蜂窝之类，都是PHP为主，加上前端的整体构建工具。
Grunt派系，这个应该是比较早的Nodejs打包构建工具，一度很是流行，Grunt的好处是提供了一个核心的构建规范，基于文件，来使用各种Grunt的插件组合整个构建行为，当时我记得比较清楚的是我前面文章提到过的Yeoman这个构建工具，核心就是Grunt，自动生成了各种插件配置。但是这个有很大的缺点：一是构建的配置文件写的很长很啰嗦，二是效率不是很高，原因是它构建的方式基于文件的，每次都会产生新的临时文件，这样无形中就会有磁盘的I/O读写，所以会降低整体的构建速度。
Gulp新体系，因为以上的Grunt的缺点，Gulp应运而生，借鉴了Unix的管道概念，用Nodejs的stream特性，来组织整个构建链条，在官方的核心只提供几个方法，大家基于官方API来编写自己需要的处理插件，再组合起来，完成构建功能。和Grunt的基本理念很像，但是很多又有区分，例如：配置和运行分离，插件单一职责，规定大于配置等等。关于这两个的比较有很多，大家可以搜搜Grunt Gulp 就知道了。不多说
新的王者Webpack，个人感觉应该是15年上半年到16年初，Webpack横空出世，大有一举统一整个前端构建生态的趋势，貌似现在FE们不会点Webpack相关的，都不好意思说自己是前端了。最初Webpack应该只是和requirejs、browserify之类模块化工具比对，但是其灵活的API和丰富的loader，致使它可以连带完成Gulp之类的构建事件，目前其生态环境巨好，各种插件层出不穷，比较火的React，vuejs等都有相关的针对性loader来优化构建方式，可以说是目前最流行的工具。不过缺点也特别的明显，就是难懂，主要是过于灵活，各种方式都能接受，导致没有一个统一的标准，配置起来特别难受，在群里，一般对于Webpack的配置问题的是最多的。很多新手对于Webpack的各种配置错误，感觉都欲哭无泪，想死的心都有了。相关的文章也很多，推荐题叶的入门指南。
逼格提升的NPM构建方式。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是ES6的构建工具。推荐看贺师俊的答案如何评价阮一峰关于前端工具变化快的言论?
就我个人而言，目前主要还是使用的Webpack来构建，当然一些比较老的系统代码，由于历史原因，还是使用的Gulp来构建，也有正在切换之中的，Gulp+Webpack。比较丰富多彩
‘陆’ web前端开发环境都有什么
最简单的txt文本编辑器就可以，专业点用dreamweaver,webstorm，vs也行，运行的浏览器也要全了，毕竟要做兼容处理测试，ie,chrome,opera,safari，火狐等都需要
另外可能需要图片处理，用photoshop，Visio都行
‘柒’ 如何搭建前端开发环境
环境搭建
前端开发环境设置和编辑器选择
‘捌’ Web 前端 IDE 用的都是什么啊
IDE是集成开发环境，一般来说，前端用的只是编辑器。
比较热门的是sublime，webstorm，vs code，什么的。
随便哪个都一样，哪个顺手用哪个。
‘玖’ 前端开发需要配置什么环境
web前端开发环境的搭配：
A、Sublime3安装配置：
Sublime跨平台的前端开发神器,是一个共享软件,免费使用；下载最新Sublime3安装包；
-官网地址:http://www.sublimetext.com/
-安装包管理器
打开Sublime3控制台,ctrl+~
输入安装包管理器命令代码，注意需要联网才能安装,因为是在线下载包
包管理器的官网地址:https://packagecontrol.io
-安装第三方插件(包)
打开命令面板:ctrl+shift+p；
输入install,然后回车，然后可以搜索想要的插件,回车安装；Atom工具使用
B、Atom工具使用：
由github发布的前端开发工具，集成了chrome的调试工具，是一款非常强大和开发的开发工具平台。在file里面的setting里面进行设置,包括字体的大小,快捷键,背景颜色主题等；
官网地址：https://atom.io/
C、WebStorm10的安装与使用：
WebStrom是最专业的前端IDE开发工具，是一个非常重量级的开发工具,是专业为我们前端设计的IDE,用他来开发是效率非常高；
D、总结三款开发工具的优劣：
Sublime3:需要安装第三方的包，一般。Atom：集成度非常好，也很轻，需要自己安装第三方的包。Webstrom：大项目，建议使用webstrom，非常强大，但是也很重。