我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由、验证、ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项目中实践。

正好2015年9月离职了去了我朋友的一个移动互联部门,说好的只是做"前端开发"的工作,当时前端也就3个人,2个切图,没办法也就我主动的负责起了前端的架构设计这块的工作,当时接手的项目beta版本已经做了将近了50%的工作了,这是一个机场贵宾厅的服务型的产品应用,项目是用 $.load 页面方式做的前后端分离,这就是个坑,项目中用了几十个js类库,页面中随处可见的全局变量的污染,大家都是纯手拿到后端接口数据,拼接html 标签然后 append 到页面,看到这些我当时就有过想走的念头

当时我没办法去改变所有的页面了,页面以及js文件太多了,而且项目工期真的很紧了,而我只能做的就是用vuejs做类库,给大家培训赶紧用上vuejs,把view层的坑给堵上,不过还好最终第一个beta版本上线了。

上线后立马迎来的是新版的1.0的工作,还不止这些还有后台项目的工作,这个时候我其实早已经开始琢磨着学习用 vueify+webpack+gulp 来做架构设计上面的工作了。

我想的是把(前台项目 和 后台项目 )的都做搭成工程化,我不想再让大家写重复的代码了,我们要做(ui组件 和 业务组件),以及全套的定制化的ui组件,我在团队中多次强调了我的憧憬,但是团队的现状就我一个人懂 vuejs,大家都很年轻,没太多经历,基本上就是jquery的思想。最后我想说基本上(架构设计 和 项目的组件哪块)都是我一个人完成的。 也如我所憧憬的那样,我做到了,只是这个过程真的太费力了,我基本每周末都得想着工作上面的事情。

我想对大家说的话:

对于那些说vue 只能做 view 层的工作的人,我只想说,我们的后台项目逻辑也很复杂,业务组件极其的多,其实我们后台前端就一个人做开发,而我只负责做复杂逻辑 和 组件,以及架构层面的事情,就完成了后台项目的开发,我们前台项目有三个人做ui切图制作,我负责做ui组件和架构设计方面的工作,大家经过了beta的vuejs 练手,以及逐渐的开始能用上vue了,我们用的是 vueify + vue-router 做的spa 架构。

对于那些即将用 vue 来做项目,以及还对vue 还怀有敬畏心的人说句,大家尽可放心使用,它已经日渐成熟了,社区已经非常的活跃。

其实我们三个月里,做了差不多4个项目,以下是我带团队做的项目架构和界面展示:

我之前的项目架构介绍文章:如何通过 Vue+Webpack 来做通用的前端组件化架构设计

前台架构设计 和 后台界面如下:

后台架构设计 和 后台界面如下:

总结:其实vue 也会有坑,任何架构都会有坑的,就是看你怎么去思考和解决它,我之后也会写一些关于vue坑的文章。我想说前端架构应该满足于团队内部的实力现状,否则它就会是你自己种下的恶果,时间不早了,晚安。

=====《最后发布一条招聘消息》=============:

 如果你有一颗想用代码来改变世界的信念,那么你来就对了”。

    招聘地址:http://maimai.cn/job?webjid=AEQgjuZh&srcu=Oj0IP9i8&src=app&from=timeline&isappinstalled=0&setcookie=1

《论vue在前后端分离项目中的实践之年终总结》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. ASP.Net中的四种状态保持机制

    每个人上网可多有过这样的情况,当我们登陆某个网站时,在登陆的旁边会有一个 "记住我" 的复选框,有的网站还会让用户选择记住我.这个记住我是怎么实现的呢? 其实就用利用的是cooki ...

  2. Ubuntu install mysql database

    简要说下ubuntu Linux下安装MySql数据库 一. 安装 # apt-get install mysql-server# apt-get install mysql-client 二.启动 ...

  3. C# sapnco支持.net 4.5了,真是个意外的发现

    意外篇: 需要用C#写一个RFC直连的类库,需要引用sapnco.dll   sapnco_utils.dll两个文件 之前都是从网上下载的sapnco3.0,引用开发,在win10机器上使用没有问题 ...

  4. HDU 2276 Kiki & Little Kiki 2(矩阵位运算)

    Kiki & Little Kiki 2 转载自:点这里 [题目链接]Kiki & Little Kiki 2 [题目类型]矩阵位运算 &题意: 一排灯,开关状态已知,每过一秒 ...

  5. 笔记 : WampServe加装PHP版本(7.2.3)为例

    1.由于正在学习Laravel框架,服务器wamp,Composer已搭建完成,但在安装laravel installer之后使用laravel new blog,报错为"This pack ...

  6. sqlserver恢复数据库被挂起

    已测试过,直接执行此句后,数据库恢复原状态.数据不会丢失.具体是什么意思,暂时没来得及搞明白 RESTORE database dbname with norecovery

  7. Java多线程-----volatile关键字详解

       volatile原理     Java语言提供了一种稍弱的同步机制,即volatile变量,用来确保将变量的更新操作通知到其他线程.当把变量声明为volatile类型后, 编译器与运行时都会注意 ...

  8. codeforces 984B Minesweeper

    题意: 给出一个矩阵,如果一个格子是数字,那么与这个格子相邻的格子中有炸弹的数量必须等于这个格子中的数字: 如果一个格子是空地,那么这个格子的所有相邻的格子中就不能有炸弹. 判断这个矩阵是否合法. 思 ...

  9. 从零开始学习MVC

    其实在学校时,已经开设了MVC这门课程,教材由授课老师自己编纂,是和微软的音乐商店相似的一个书店项目,当时无法理解 Linq.Lambda , 只记得是按照老师的方法,复制+粘贴,不明其意,亦不知其理 ...

  10. 【Scala学习之二】 Scala 集合 Trait Actor

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...