精华内容
下载资源
问答
  • 前端架构设计与总结
    千次阅读
    2020-06-16 15:57:55

    (1)前端架构设计

    1、规范制定

    规范可以让团队成员更加容易理解代码、梳理逻辑、主要包括:css规范、HTML规范、JS规范、文件目录规范、GIT使用发布规范、接口规范、UI规范、组件数据传递规范。

    2、 模块化管理

    模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。

    3、 组件管理

    什么是组件

    组件就是 最原子的DOM结构 和 这些原子组件组成的业务组件

    4、自动化打包测试

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

    (2)一般项目需要用到技术元素:

    1、开发规范:

    包括开发、部署的目录规范,编码规范等。不要小瞧规范的威力,可以极大的提升开发效率,真正优秀的规范不会让使用者感到约束,而是能帮助他们快速定位问题,提升效率。

    2、模块化开发:

    针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。

    3、组件化开发:

    在模块化基础上,以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护,组件单元是资源独立的,组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等,甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装,解决一些常见的组件渲染、交互问题。

    4、组件仓库:

    有了组件化,我们希望将一些非常通用的组件放到一个公共的地方供团队共享,方便新项目复用,这个时候我们就需要引入一个组件仓库的东西,现在流行的组件库有bower、component等。团队发展到一定规模后,组件库的需求会变得非常强烈。

    5、性能优化:

    这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富,就不在这里展开了,感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是 性能优化一定是一个工程问题和统计问题,不能用工程手段保证的性能优化是不靠谱的,优化时只考虑一个页面的首次加载,不考虑全局在宏观统计上的优化提升也是片面的。

    6、项目部署:

    部署按照现行业界的分工标准,虽然不是前端的工作范畴,但它对性能优化有直接的影响,包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。

    7、开发流程:

    完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本,工作这些年见过很多独立的系统(cms系统、静态资源推送系统)将开发流程割裂开,对前端开发的效率有严重的阻碍。

    8、开发工具:

    这里说的工具不是指IDE,而是工程工具,包括构建与优化工具、开发-调试-部署等流程工具,以及组件库获取、提交等相关工具,甚至运营、文档、配置发布等平台工具。前端开发需要工具支持,这个问题的根本原因来自前端领域语言特性(未来我会单独写一篇文章介绍前端领域语言缺陷问题)。前端开发所使用的语言(js、css、html)以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统,要想把它们串联起来,才有了yeoman这样的封装。

    (2)前端项目架构总结

    1.技术不盲目追新:

    完美满足需求的技术才是这个项目最好的技术

    2.技术选型不能盲目追求高逼格

    在快速开发过程技术选型要尽量简单,适用,功能无需过于复杂,后期可对项目做增量升级。

    3.技术栈以精简为佳

    不要选取太多相似功能的插件包引入项目,一来增加开发人员学习成本,二来会增加项目体积,导致项目运行变慢。

    4.项目的可维护性、一致性

    一致性很容易理解,就是尽量统一组员的代码风格,书写规范,编程思路。

    5.对组员技术的提升

    团队作战为王

    6.前后端沟通交流

    架构之前必须制定合理的前后端规范,约定好文档书写模式,如:字符串与整型要明确标示、哪个参数是必须要存在的,哪个是可传可不传的等等。
    如果组员有对http协议、服务器不熟悉的一定要进行培训。很多前端都会觉得这部分不是自己的事,实际上这部分双方都要处理。

    7.前端与各个岗之间的协作方式

    从哪里获取了解需求,原型图的获取,UI,前后端。测试的开发测试方式,虽然这是项目经理要考虑的事情,但是了解这些可以更好的把握项目开发的缓急程度,从而更好的做技术选型。

    更多相关内容
  • 多位前端架构设计

    2018-06-11 09:43:59
    前百度前端技术总监张云龙依靠其数十年的开发经验,结合自身对前端的理解,软件架构是 一系列相关 的抽象模式,用 于指导 大型软件系统各个方面 的 设计。”
  • 前端架构

    2022.02.08 今天读了一篇关于前端整洁架构的设计,因此对其中的内容进行了一些整理以及我自己的思考,后续阅读《领域驱动设计》后可以加入更多的内容。

    References:

    前端领域的 “干净架构”

    架构方面学习笔记(3)–前端架构设计

    整洁架构

    以一个🌰来介绍整洁架构:

    商店会出售不同种类的饼干,用户可以自己选择要购买的饼干,并通过三方支付服务进行付款。

    用户可以在首页看到所有饼干,但是只有登录后才能购买,点击登录按钮可以跳转到登录页。

    把饼干加进购物车后,用户就可以付款了。付款后,购物车会清空,并产生一个新的订单。

    在这里插入图片描述
    上图明确出了整洁架构的三个部分,但它还是有一些抽象,在实际开发和设计中我们如何遵循这个架构进行设计呢?

    1. 明确实体,比如例子中的:商品、用户、购物车、订单。明确数据转换函数(必须仅依赖本层的各种实体和规则)如计算总价的方法
    2. 应用层:
      - 列 use case:①找出参与者②找出动作③明确结果
      - 写数据转换或者说描述 use case:side effect(从适配层与服务端的交互中拿数据) --> pure function(纯函数处理数据)–> side effect(存储处理结果)
      - 列 Interfaces
    3. 适配层:
      • 用户界面
      • API 请求
      • 存储或状态管理

    最后:整洁架构让每个 use case 独立起来,同时适配层让第三方服务随时可替换,这会让整个架构扩展性极强,但不可避免的会带来一些如代码量的增大这种劣势。

    我个人看法是整洁架构最关键的一点是希望逻辑和 UI、第三方服务 能够分离,而如今的 react vue 都提倡使用 hooks,核心也正是如此。在现实开发中实现理想状态下的整洁架构当然是具有一定的难度和不可预测性,比如你真的可以做到逻辑和状态管理的真正分离吗,你的项目可以随意从 react 和 vue 中切换吗,诸如此类的问题。但梳理整洁架构的过程仍然给了我们不少启发:

    • 通过列实体、列 use case 对于我们设计 store 结构具有很大的帮助
    • 将逻辑从状态管理、第三方服务中剥离出来,尽量做到各司其职和不依赖框架的测试
    // 整洁架构下的商品购买代码树
    src/
    |_domain/
      |_user.ts
      |_product.ts
      |_order.ts
      |_cart.ts
    |_application/
      |_addToCart.ts
      |_authenticate.ts
      |_orderProducts.ts
      |_ports.ts
    |_services/
      |_authAdapter.ts
      |_notificationAdapter.ts
      |_paymentAdapter.ts
      |_storageAdapter.ts
      |_api.ts
      |_store.tsx
    |_lib/
    |_ui/
    
    

    DDD(Design Driven Design) 领域驱动设计

    Reference:

    领域驱动设计在互联网业务开发中的实践

    《领域驱动设计》

    特点: 从开发到测试整个团队使用同一的架构语言;业务与架构强关联,从而建立针对业务变化的高响应力架构

    几个名词解释:

    DDD 中有较多的术语,这里仅写了几个,更多的可以参考 领域驱动设计-什么是领域驱动设计和怎么使用它

    • 领域:一个系统要解决的实际问题的集合,或者说业务本身
    • 通用语言:所谓通用语言讲的并不是开发和测试都用一种开发语言,比如 golang,JavaScript 等,而是与领域模型相关的结构化语言保证整个团队对整个系统的理解一致,比如一个商城系统中的订单收货地址和个人信息收货地址应该明确区分,而不是混为一谈「收货地址」

    上文中提到的前端架构设计其实类似于 DDD 六边形架构。

    DDD 相对于三层架构有什么提升?

    三层架构的劣势:MVC 可以看做是三层架构的一种实现模式,我们知道任何一个操作都是从 controller 层传入,services 层操作数据库或者第三方服务。

    • 严格分层模式下,用户界面层不能跨过业务逻辑层调用数据访问层
    • 三层架构下往往 service 层会越来越臃肿,最终一堆逻辑混杂在一起,不易于扩展以及满足新的业务需求

    三层架构又被称为「分层贫血领域模型架构」,贫血即指业务实体中没有或者很少方法。而 DDD 则被称为充血领域模型,正式因为领域对象拥有更多的能力。

    待增加更详细的内容

    展开全文
  • 前端架构设计

    万次阅读 2017-05-03 11:56:53
    前端架构师们认为有多个关键的决策需要在项目启动之初就制定下来,如果等到开发阶段的后期再考虑,不是已经用不上,而是一开始错误的决定已经造成了无法挽回的损失。一旦做出这些决策,我们的任务就是去辅助视觉设计...

    前端架构师们认为有多个关键的决策需要在项目启动之初就制定下来,如果等到开发阶段的后期再考虑,不是已经用不上,而是一开始错误的决定已经造成了无法挽回的损失。一旦做出这些决策,我们的任务就是去辅助视觉设计、平台开发、底层结构,使之能最大程度满足需求。
    如果我们有这样的机会,那么可以创建一个很长的愿望清单:

    • 模块化内容。希望尽可能复用小的组件,而不是弄出几十个不同的内容块。
    • 全面测试。我们之前经常出现这样的情况,大量的前端代码合入到主干,然后导致几个月前的代码出现运行问题。这样太浪费时间了,所以我们决定要像测试后端代码一样测试我们的新框架,达到一样高的代码覆盖水平。
    • 流式处理。引入Git流程。
    • 详细的文档。

    模块化标记

    我们都在追求的理想的状态是,网站每一行HTML都由程序自动生成,而作为前端开发人员,我们只需要管理这个用来产生标记的模板和流程,遗憾的是,现实通常并非如此。即使在最好的情况下,也存在用户生成的内容,而这些内容几乎都无法自动添加CSS类名来标记。无论CMS系统(可以理解为后台)自动生成HTML的能力如何,让CMS决定类似表单和导航栏这样的标记,有时候会更简单。
    模块化标记和手写的静态标记的区别在于,程序化地执行完之后,我们还可以通过一套类名系统给标记动态添加CSS类名。而且不再通过元素标签和层级关系来决定视觉外观。让我们看看如何用BEM原则(一个CSS规则,下面会说到)模块化地实现一个简单的导航:

       <nav class="nav">
         <ul class="nav__container">
            <li class="nav__item">
               <a href="/products" class="nav__link">
                  <ul class="nav__container--secondary">
                     <li class="nav__item--secondary">
                        <a href="/socks" class="nav__link--secondary">

    要使用这种模块化方法,我们首先需要改变构建页面的方法和思路。作为前端开发人员,我们的工作就是把视觉语言拆解成最小单元,拆解之后,我们可以创建规则,对这些最小单元进行重组
    上面提到的BEM(Block Element Modifier,块元素修饰符)是一个CSS类名命名规则,它建议每个元素都添加带有如下内容的CSS类名:

    • 块名。所属组件的名称。
    • 元素。元素在块里面的名称
    • 修饰符。任何与块或元素相关联的修饰符

    过多的CSS依赖

    如果我们想渲染我们样式中的某一块内容,首先需要加载以下内容

    • Boostrap CSS: 114KB(未压缩)。其实网站本身没怎么调用Boostrap库的代码,但我们编写所有CSS的前提条件都是Boostrap已经重置了基本样式。
    • 核心的网站CSS: 500KB。虽然一般来说,每块内容都有一个单独的关联文件。但这个文件不是这块内容的单一样式来源。样式不仅来源位置多样,并且常常基于位置和页面的类被覆盖重写。

    自上而下的样式命名方法意味着,每次修改我们都要写一个更长的、更具体的选择器,同时,因为标记顺序极为严格,每块内容都很难重排或者替换。当然我们可以抽出一个单独文件,并把它需要的所有样式合并到单独的一个文件里,但是这么做基本意味着完全重做这个组件里的CSS文件,每块内容都很难重排或者替换。
    因此我们指定了一些规则,以下是我们指定这些规则时需遵循的规范:

    • 只包含不可变的规则,而不是笼统的说明。
    • 总是把规则提炼成最简单的表达。
    • 总是首先说明规则时什么,再说明“如果不这样,那么会怎么样”
    • 每个规则必须包含以下词的一个——总是、永远不要、只有、每一个、不要、要

    最后指定的设计系统的规则如下

    • 永远不要给布局的子内容强加内边距和元素样式。布局只关注垂直对齐、水平对齐和文字间距。
    • 主题和别的数据属性值永远不要强制改变外观,他们必须保持布局、组件和元素可以应用于其上。
    • 组件总是贴着它的父容器的四个边,元素都没有上外边距和左外边距、所有的最后节点(最右边和最下边的节点)的外边距都会被清楚。
    • 组件本身永远不要添加背景、宽度、浮动、内边距和外边距的样式,组件样式是组件内元素的样式。
    • 每个元素都有且只有一个唯一的且作用于只在组件内的CSS类名,所有的样式都是直接应用到这个选择器上, 并且只有上下文和主题能修改元素的样式。

    JavaScript

    为js创建规范是非常有必要的,可以参考以下建议:
    保持代码整洁。JS Hint是这写工具中一个很好的例子,这里有几条可以通过JS Hint检查的规则:

    • 强制使用===和!==代替==和!=
    • 限制代码块嵌套深度
    • 限制函数的参数数量
    • 如果函数重复定义,发出警告
    • 如果变量创建后未被使用,发出警告

    创建可复用的函数。比如我们常用的addClass操作,如果需要多次创建新的.green-alert类名,只需要修改定义好的add_background方法:

       $.fn.add_background = function(color){
           this.css('background-color', color);
           return this;
       }

    测试核心

    在开始为应用程序规划测试时,请记住以下几条建议:

    • 测试用例应该在建站的同时或之前开始编写
    • 测试代码是真实的代码,应该一起或立即提交到系统代码库中。
    • 必须在所有的测试用例都通过之后,才能把代码合并到主干上。
    • 在主干上运行测试工具,结果都应该为通过。

    单元测试时将应用程序分解为尽可能小的函数,并创建可重复的、自动化的测试用例的过程。“一次只做一件事,并把它做好”是构建基于单元测试的应用程序的原则(函数式),我们在写函数时经常想同时实现很多功能,结果最后不仅降低了了效率,还增加了测试的难度。
    单元测试的基本思路是调用要测试的函数,传递一些预先设置好的参数,并描述结果是什么。

       function calculateShipping(distance){
          switch(distance){
              case(distance < 25):
                 shipping = 4;
                 break;
              case(distance < 100):
                 shipping = 5;
                 break;
              case(distance < 1000):
                 shipping = 6;
                 break;
              return shipping;   
          }
       }
       QUnit.test('Calculate Shipping', function(assert){
           assert.equal(calculateShipping(24), 4, '24 Miles');
           assert.equal(calculateShipping(99), 5, '99 Miles');
           assert.equal(calculateShipping(999), 6, '999 Miles');
           assert.equal(calculateShipping(1000), 7, '1000 Miles');
       })

    确定合适的测试覆盖率是一件很难权衡的事,在我们的项目中,如果一个新功能需要花费8小时开发完成,我们要确保另外预留2个小时来编写用例并验证测试覆盖率。尽管这会多花费25%的时间,但这其实会节省很多后续回头追查bug的时间。

    性能测试

    把你的网站性能基线与行业平均水准和通用的最佳实践相比较是必不可少的。
    HTTPArchive(http://httparchive.org/)是个不错的服务,它测试并记录了几十万个网站,有几个值得注意的数据如下:

    • 页面大小:2061KB
    • 总请求数:99
    • 可缓存资源所占比例

    因此,如果想让自己的网站比大部分网站都快,可以考虑设定一个目标:一个1648KB的网站,包括79个请求,其中44个请求可以缓存,这将使你的网站领先平均水平20%。

    展开全文
  • 多维前端架构设计

    2019-07-22 21:15:15
    资源名称:多维前端架构设计资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
  • 前端架构设计这块也已经工作了一段时间,也翻遍了很多书籍,但是就目前来说笔者还是没有看过真正把前端架构讲好的书,加上现在前端技术的发展诞生了许多新的框架,如:vue、react、angular,这也越来越淡化了前端...
  • 基于Vue的前端架构设计

    万次阅读 多人点赞 2020-02-24 23:49:54
    前端架构设计图 MVVM架构模式 MVVM的简介 MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现...

    架构图

    前后端分离总架构图

     

    前端架构设计图

     

    MVVM架构模式

    MVVM的简介

    MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

    在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

    MVVM模式图

     

    vue

    1.    学习vue的前提

    • 你只需要了解关于 HTML、CSS 和 JavaScript 的中级知识,就能进行开发。
    • vue用于构建用户界面的渐进式框架,渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
    • Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。
    • 我们没必要一上来就搞懂Vue的每一个部件和功能,先从核心功能开始学习,逐渐扩展。 同时,在使用中,我们也没有必要把全部件能都拿出来,需要什么用什么就是了,而且也可以把Vue很方便的与其它已有项目或框架相结合

    2.    vue的简单介绍

    Vue.js 可以说是MVVM 架构的最佳实践,是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API 简洁

    3.    vue热加载

    因为vue的双向数据绑定特性以及技术的成形,实现了项目的热加载,改完页面代码能立即在浏览器方面显示效果,提高开发效率

    4.    vue的双向数据绑定的原理

    Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

     

    Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。

    Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。

    Watcher 订阅者, 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。

    Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。

    5.    vue引用与后台的交互

    在访问一个 API 并展示其数据,基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种,

    首先,我们要通过 npm/Yarn 或一个 CDN 链接安装 axios,

    我们有很多种方式可以从 API 请求信息,但是最好首先确认这些数据看起来长什么样,以便进一步确定如何展示它。为此,我们会调用一次这个 API 并输出结果,以便我们能够看清楚它。如 CoinDesk 的 API 文档所述,请求会发送到 https://api.coindesk.com/v1/bpi/currentprice.json。所以,我们首先创建一个 data 里的属性以最终放置信息,然后将会在 mounted 生命周期钩子中获取数据并赋值过去:

    new Vue({
     el: '#app',
     data () {
       return {
         info: null
      }
    },
     mounted () {
       axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => (this.info = response))
    }
    })
    <div id="app">
    {{ info }}
    </div>

     

    我们得到的东西是这样的:

    { "USD": { "code": "USD", "symbol": "&#36;", "rate": "5,255.3433", "description": "United States Dollar", "rate_float": 5255.3433 }, "GBP": { "code": "GBP", "symbol": "&pound;", "rate": "4,061.1927", "description": "British Pound Sterling", "rate_float": 4061.1927 }, "EUR": { "code": "EUR", "symbol": "&euro;", "rate": "4,699.5277", "description": "Euro", "rate_float": 4699.5277 } }

     

    当然这个只是一个非常简单的示例,在项目开发过程中,我们会基于axios做一些封装,包括错误处理,请求拦截,请求优化等等

    6.    vue常用的网站

    vue官方文档:https://cn.vuejs.org/v2/guide/

    vue资源精选:http://vue.awesometiny.com/

    vue GitHub地址:https://github.com/vuejs/vue

    基于vue和element构建的后台前端解决方案:https://panjiachen.github.io/vue-element-admin-site/zh/

    vue项目说明

    vue项目网上有非常多的成名模板,我推荐一个,想深入学习建议多多浏览下面的地址

    vue和element构建的后台前端解决方案:<https://panjiachen.github.io/vue-element-admin-site/zh/

    目录结构



    ├── build                      # 构建相关
    ├── static                     # 静态资源
    │   │── img                    # 图片
    │   │── favicon.ico            # favicon图标
    │   └── index.html             # html模板
    │   │── Tinymce                # 富文本
    ├── src                        # 源代码
    │   ├── api                    # 所有请求
    │   ├── assets                 # 主题 字体等静态资源
    │   ├── components             # 全局公用组件
    │   ├── directive              # 全局指令
    │   ├── icons                  # 项目所有 svg icons
    │   ├── lang                   # 国际化 language
    │   ├── layout                 # 全局 layout
    │   ├── router                 # 路由
    │   ├── store                  # 全局 store管理
    │   ├── styles                 # 全局样式
    │   ├── utils                  # 全局公用方法
    │   ├── views                  # views 所有页面
    │   ├── App.vue                # 入口页面
    │   ├── main.js                # 入口文件 加载组件 初始化等
    │   └── permission.js          # 权限管理
    ├── tests                      # 测试
    ├── .env.xxx                   # 环境变量配置
    ├── .eslintrc.js               # eslint 配置项
    ├── .gitignore                 # git 配置项
    ├── .babelrc                   # babel-loader 配置
    ├── .travis.yml                # 自动化CI配置
    ├── vue.config.js              # vue-cli 配置
    └── package.json               # package.json

    此为常见的目录结构,在实际开发过程中,会因为项目的差异,目录有些小的改动。

    项目启动

    在终端

    # 进入项目目录(假设项目名为:vue-element-admin)
    cd vue-element-admin
    ​
    # 安装依赖
    npm install
    ​
    # 本地开发 启动项目
    npm run dev
    ​
    # 启动完成我们就能在,提示的地址中,浏览或开发项目(例如地址为:http://127.0.0.1:9528)
    http://127.0.0.1:9528

     

     

    url到页面显示的过程

     

    浏览器端显示HTML的过程

    .vue文件的基本模板

     

    展开全文
  • 前端架构师必看.png

    2020-07-23 05:13:22
    前端架构师的思维导图,从基础到高级,有vue,面试题分析,实战,nodejs等一系列的专题,围绕着前端架构来展开
  • 前端架构设计 后台架构设计概念适用于前端,前端没有数据库设计,所以可以不考虑并发。 vuejs的优点,一样适用于前端项目。高内聚,低耦合,可复用,单元测试。 从项目的生命周期,开发、上线、维护三个阶段考虑 ...
  • 基于VUE的前端架构设计

    千次阅读 2019-09-22 10:23:27
    前端技术架构设计图如下: 前端关键技术介绍: 1. 使用Vue2.0 +Vuex MVVM 框架,框架依赖中间件有:vue-router,axios。 采用MVVM实际解决的前端问题:提高效率、提升性能、提高可扩展性、防止重复造轮子、提高...
  • vue项目前端架构设计

    千次阅读 2018-10-24 17:57:17
    为更好地实施我们的业务需求,需要一些规则或思考来帮助我们设计架构我们的前端工程,本文将以Vue项目为例,讨论如何设计与实施我们的项目架构,来满足版本的迭代、更新. 组件 组件:一个个的可复用单元,单页面...
  • 本文介绍我在实际的前端项目中的架构设计,展示因为需求变化而导致架构变化的过程。全文分为三个阶段,分别对应三次需求的变化,给出了对应的架构设计。在第一个阶段中,我使用面向过程设计;在第二个阶段和在第三个...
  • 前端架构八大设计准则

    万次阅读 2020-07-14 21:04:03
    前言 相信很多前端小伙伴都有过这种困惑:工作了好几年了,每天都做着重复的事情,无聊且繁琐。...架构设计应以满足一定周期内的需求为目标。周期一般考虑一年即可,需求包括功能性与非功能性(.
  • 前端架构存在的目的,就我个人理解来说,有以下几点:1、提高代码的可读性。一个好的架构,代码的可读性一定是很强的。简单来说,假如有一个新人加入团队,那么他接手这个项目,一定是容易上手的,能简单轻松的了解...
  • 如何一步步设计前端架构

    千次阅读 2019-06-20 17:55:12
    前端架构吗?前端架构模式吗? 架构是什么? 软件架构,是一种为了解决复杂问题的通用模式。软件架构,是关于软件系统的一系列有层次的技术决策的集合。换句话来说,当我们讨论架构的时候,不能只讨论...
  • 前端架构

    千次阅读 2022-03-27 19:01:56
    通过操作DOM就能完成的工作,不需要复杂的设计模式和代码管理机制,也就不需要架构来支撑起应用。前端开发的发展历史分为以下几个阶段: ● 古典时期。由后端渲染出前端 HTML,用 Table 布局,用 CSS 进行简单的辅助...
  • 我在2年之前,写过一篇中小型项目的前端架构浅谈。 随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了。 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发,分析为什么...
  • 前端架构图解

    2021-10-20 16:36:34
  • 如何设计前端架构 就当前而言,要设计出一个微前端应用不是一件容易的事——还没有最佳实践。在不同的落地案例里,使用的都是不同的方案。出现这种情况的主要原因是,每个项目所面临的情况、所使用的技术都不尽...
  • 前端架构

    千次阅读 2020-11-15 20:08:18
    前端架构图 https://www.cnblogs.com/clwydjgs/p/10796763.html
  • 前端的入门书籍已经很多了,从《JavaScript 高级程序设计》到《精通 CSS:高级 Web 标准解决方案》 前端的框架书籍已经很多了,从《深入浅出 Node.js》(笑~)到《JavaScript 框架设计》 所以,两年前当我想总结我...
  • vue前端架构文档

    2019-03-13 14:17:51
    VUE前端架构说明文档
  • 本文针对LTE引入后多模多频段选择对终端产品体积、成本、性能等方面所带来的挑战进行了深入分析和研究,并给出了现阶段解决上述挑战的射频芯片和射频前端参考设计架构
  • 前端架构,有什么能做的?

    千次阅读 2019-06-24 22:45:10
    前端架构吗?前端架构模式吗? 架构是什么? 软件架构,是一种为了解决复杂问题的通用模式。软件架构,是关于软件系统的一系列有层次的技术决策的集合。换句话来说,当我们讨论架构的时候,不能只讨论某某架构,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 189,562
精华内容 75,824
关键字:

前端架构设计