Ⅰ 自学web前端架构之前需要具备什么条件在哪能学到更好的架构技术
首先web前端架构基本都是从前端工程师发展而来的，掌握好基本的前端技术基础，有两三年的前端经验，至少是做过1-2次大型的公司级项目，做过同类的工程，才更有资格去架构它，有了这些经验你再进阶前端架构师才有优势，至于在哪里学，网上前端架构师的课程挺少的，有的是用一些热点知识拼凑起来的，也不太实用。慕课网也有web前端架构师这类课程，这门课用了一个真实复杂项目来帮大家搭建全局性架构思维，我听过第一阶段的脚手架内容，确实很实用填补了大多数人在这方面的能力空白，普遍反响很不错。以目前我看过的内容来看，老师水平确实符合p7架构师应该有的水平。
Ⅱ 前端有什么框架呀
一、 Web前端框架之Angular 2+
Angular 2+优点解析：
Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字，会影响团队使用它。Angular 1 的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 Web 应用程序具有相似的模型-视图模式。通过对 Angular 1 进行现代化演变和重新构建框架的某些部分，Angular 2+ 已经真正的爆发了，大量的正式的和非正式培训机构数量都让人印象深刻，开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件，这也是本系列中少有的几个框架能够做到这点。
缺点解析：
我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 Web 应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了 TypeScript 对最终开发者的价值。
发展方向：
Angular 5 刚刚发布，这看来是 Angular 已经成功的印证了快速发布版本的承诺，在 Google 的持续支持下，Angular 会越来越成熟。
像许多的大型组织一样，Google 具有多重(分裂)的人格，从外表上看，Angular 团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是，和谐只是一层薄薄的窗户纸。Angular 团队对于 Web 组件和渐进式 Web 应用没有一个真正解决方案。我们认为，业界普遍认可的标准将会在 Angular 框架中会逐步实现，这将会影响到如何更好的构建 Angular 应用将成为一个中/长期的风险。
使用环境：
如果你需要在一个大型的框架内获取技术资源，框架内的技术通常很容易移植;或者你需要在框架中训练开发人员，并且还要有一定的信心，他们会在短期内获得一定的开发能力，这样的话你可以考虑 Angular 2+ 。需要注意的是 Angular1(angular.js)与 Angular2+ 是截然不同的，其中的应用、技术和经验不能直接移植到 Angular2+ 的开发中去。
如果你的 Web 应用能够很好的转化为标准的模型-视图模式，那么你也可以忽略其他直接考虑使用 Angular2+ 。
如果你对 Google Material UX 设计模式满意，那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。
二、Web前端框架之React + Rex
React + Rex优势解析：
React 和 Rex 的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序。
缺点解析：
React 和 Rex 最大的弱点不是它们是什么，而是它们不是什么。要构建一个功能丰富的 Web 应用程序，你需要许多功能，一旦脱离 React 和 Rex 和其他一些库的核心，你将发现一个非常分散的社区，拥有无数的解决方案和模式，不容易整合在一起。
因此，虽然 React 和 Rex 都是非常专注的库，但缺乏经验的团队还是会很容易地生成不可维护的解决方案，而不是意识到他们所做的选择会导致性能不佳或错误。即使有经验的开发人员也可能意识到，一个松散的架构或惯例可能会在未来困扰他们。
假省钱是一种对自己的欺骗，组织范围内采用 React 和 Rex 将轻松降低无效率问题。没有其他库和模式的广泛约定和标准化，标准化 React + Rex 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。
发展方向：
Facebook 和 React 最近从繁琐的附加专利纠纷中抽离，他们认识到，就像其他项目一样，更广泛的社区能够提高自己的声音。我觉得这有助于 Facebook 意识到他们还不能更好地了解我们，相信我们来引导项目。希望这将继续贯穿项目的特点和技术方向。
很难预测 React 和 Rex 的未来。但是，将库集中在一起，确实会显着提高适应性，大多数React + Rex 模式都会促进一个分离的体系结构，从而可以轻松地进行重构和迭代。两年前，大家喜欢的还是React + Flux，但整个社区很快就拥抱了Rex。思维或模式的其他重大转变可能很容易被采纳。这种关键能力可能会持续到未来。
使用环境：
如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Rex 可能是正确的。在这一过程中，你不仅需要对你的团队和组织的能力保持诚实，还要在你的初始开发过程中，以及在整个应用程序的长期维护过程中保持诚实。
三、Web前端框架之Vue.js
vue.js优势介绍：
渐进式构建能力是vue.js最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。
vue 有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。
缺点介绍：
在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑，即使没有完美包含一个模式到另一个模式的完美转换，但让人感觉希望能维持两个模式的相关性。对于那些期待vue.js完美解决方案，并可能导致难以维护不一致的应用程序的人来说，这至少是令人困惑的。
一个更大的挑战是vue.js依赖于一个单独的人，很明显，其他的项目基本是由一个组织提供支持，但这让人感觉更加有意义，虽然它有一个强大文件的社区和许多有创新的新增项目，但是 vue 核心的开发基本落在一个人身上。
我们很高兴看到 vue 更加容易接受新兴的标准方法，但是它的类似于 Web 组件的模式，而不是真正的 Web 组件，这可能是 vue 所得不偿失的地方。
发展前景：
虽然vue.js有相当广泛的应用，但也很难预测在中期发展中这个势头能持续多久，它不是由一个商业组织直接支持并维护，因此，这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。
它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明vue.js架构将来无法适应进一步发展。
使用场景：
如果你有一个传统的Web应用程序，并需要一个强壮稳健的应用程序层，那么vue.js 可能是一个很好的选择，它有清晰的模式，即使没有经验的团队也能正确或者错误的使用它。尽管vue UX框架没有开箱即用的功能，但在vue.js上也能大量持续性构建应用，这将有利于你的项目。
Ⅲ web前端项目的结构是怎样的
你指的是文件夹结构吗？
通常包含index.html文件，以及cn/html文件夹（用户存储html文件）、CSS文件夹、images文件夹、js文件夹
前面这些都是上线时要有的，如果是自己的项目，还可以增加imageStudio等文件夹用于存储PSD等设计图、相关文档等
Ⅳ 前端架构师是怎样定义的在前端开发过程中,承担怎样的职能
前段构架师总体的定义是一个具有精通各种前端开发技术可以总体规划处一个网站前台项目。
1、具体的说前端构架师是一个具有网站前端基础知识如html、css、js等和一些前端框架如jQuery、angularjs等等前端技术，可以规划处一个前端项目的实施、测试、优化等过程，并且熟悉后台语言可以和后台开发人员合作达成良好的交互和数据与表现的分离。另外还需要明确网站的定为，满足客户的需求，可以留住客户，使用网站这种手段为公司提高效益，前端是直接和用户交互的媒介。
2、职能：包括规划和实施整个项目，制定项目中的一些规范，明确人员的分工，解决团队中的协作问题以保证项目的按时完成。
Ⅳ 什么是前端架构
架构设计的最重要目的是为了进行整体系统概览，以及开发方向指导。
而架构要包含的内容，简单说就是下面四个
1、系统间关系
2、系统内关系
3、应用内架构
4、系统规范与原则
而架构的原则主要是三个方面
1、架构的合适：架构就像衣服，不能太长，也不能太短
2、可扩展的：架构需要充分考虑扩展性
3、持续不断的：架构不是一次性物品，是一个跟着软件生命周期的长期过程
Ⅵ 如何搭建主流的前端架构，需要注意的问题有哪些
首先，了解前端开发 什么是html？ 首先要明确，html是前端的基础！Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。.
Ⅶ 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs
vue：
vuejs 文档比较齐全，vue吸取了angularjs 的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router（spa框架）。
Ⅷ 要想成为前端架构师，应该学习哪些技术
我比较认同的有winter和贺师俊还有张云龙这三位。其他没提到的可能我不太关注，高手很多，但是能达到架构师的其实不多，最多算是高工，或者某一领域专业的牛人，我觉得就像前3位提到的大神，他们的编码能力过硬，算法能力，计算机基础知识都没的说，许多回答都是干货，有理有据，show me code风格的，而且解答不会模糊，直接简要，能做到这些必须是肚子里有货，我觉得这算是硬件基础。
2，编码能力好，熟悉各项标准，算法好，API熟练，就能成为前端架构师了么?不不，这些只能说你是个高工，你说你自己写了许多框架和开源包，各种功能，前后端都有？no no no，也是最多算是高工而已。至少我是这样认为，为什么呢？因为你踩的坑决定了你架构的能力，你的硬件基础只决定了你遇坑之后的解决能力。
打个比方，前端工作3年，一直在电商领域，或者一直在做sns，或者一直在做webview里的开发，这种经验是不具备前端架构能力的，什么？都是写js？没区别？错了，你让一个写了3年电商框架的人去写一个斗鱼tv或者搜狐视频试试，写是能写出来，但是选型问题真不会是最佳，因为他踩的坑一定没有专注这个领域的人多。什么是架构能力？其实说白了就是帮助最后项目顺利开发完成，易扩展，好维护，有规范，能解决一些刚开始人看不到的麻烦。这些能力都是从一个一个真实得项目中锻炼出来的，而不是说只做了一家公司的一个项目之后就可以说自己是前端架构师了。。
说的比较乱，其实简单比方就是个经验包的问题，你的经验比你的技能更大的决定了你的架构能力。
3，沟通表达能力，这个其实不是特别重要，但是单独拿出来说，就是因为如果你的想法不能在团队有效的执行下去是不行的，你必须也一定是最后说服团队使用你的方案的人。
所以最后，回到up主问的问题上来。
从一个前端工程师，如何根据目标，制定计划，前端架构师需要涉及哪些知识点，还有哪些知识点是前端工程师所不具备的。希望知友提点。没什么知识点，你必须对你要做的东西有经验，至少是做过1-2次（公司级项目），这才是架构师的价值，如果你根本没做过同类的工程，你有什么资格去架构他呢？现学现研究那只是高工而已。
至于题目问的如何成为一个前端架构师，我觉得那些已经被很多人叫成前端架构师的人，自己都不觉得自己算是吧，只是入行久一点，活的长一点，经验多一点，做的项目杂一点，跳槽次数猛一点，比你努力一点而已。