如何通过 Vue+Webpack 来做通用的前端组件化架构设计
目录:
1. 架构选型
2. 架构目录介绍
3. 架构说明
4. 招聘消息
目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs、angularjs、emberjs、avalonjs、vuejs。
我个人接触使用过:avalonjs、angularjs、vuejs。因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构。
以下仅仅是代表我个人选用架构的一些看法和理由,如下:
angular:
我觉得angularjs的学习上手周期比较长,可能遇到问题,都无法立刻解决,而且编码的质量明显的很差,如果团队没有制定规范,那写出来的代码就没法看。对于一个选用angularjs的团队来说,我认为编码规范是很重要的,否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全,我感觉一些开源支持的力量不够多。不过,如果有项目需求,需要去做IE浏览器的支持话,我建议选择avalonjs
vue:
vuejs 文档比较齐全,vue吸取了angularjs 的一些优点,规避了一些缺点,至少编码规范上有了一个质的飞跃,学习上手的周期比较短。vue起初只是一个轻量级的类库,用来做类似于react的事情,同时vue也是可以拿来做前端架构设计的,比如:vueify + vue-router (spa框架)。
vue学习地址:http://cn.vuejs.org/
以上说了那么多没用的,下面就来点干活了!
我的前端组件化架构设计,目录如下:
项目架构用到的知识点,还是挺多的,知识清单如下:
[1]: gulp + webpack 构建打包工具, 使用了一系列的loader,比如:vue-loader, sass-loader, babel-loader , 以及 postcss,postcss-custom-properties,等等
[2] : postcss-custom-properties : 用来做样式全局化, 只需要通过变量去维护,通过编译变量既可以换肤。
[3] : vue-loader (vue文件组件化):用来去编译处理 *.vue 的文件,一个vue 文件就是一个单独的组件,vue组件开发具有高独立且易维护。组件的划分可大可小,一个页面也可以看作成由多个vue 组件构成的,一个页面也可以是一个vue组件, vue 文件结构如下:
[4] : babel-loader :实现对vue文件中 es6 语法的编译解析
[5] : vue-router :用来做路由分发,而且文档非常的齐全(学习地址:http://vuejs.github.io/vue-router/zh-cn/index.html)。
[6] : vue (插件式方式):vue本身提供了一个install 方式用来注入,我们可以注入一些全局的(属性、方法、以及通用的ui组件)。
下面说说文件夹的含义:
common 文件夹: 是用来存一些通用的东西,比如样式,以及全局的js等等
components 文件夹:用来放独立的组件,我打算后期做细分,ui 组件,以及page 组件等等,这里面就是团队的心血,以后就能做成独立的组件库了。
filters 文件夹:用来放通用的过滤器操作。
plugins 文件夹:用来放 Vue.use 注入到Vue全局的插件库,比如:请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。
views 文件夹: 用来存放页面模块
app.vue 文件:第一次启动的主程序模块
app.js 文件:启动前的加载,注入,实例化
router.config.js 文件:路由模块
目前该架构在前后台的SPA架构都适用,可能还是有很多不完善,不过我还很年轻,vue也还狠年轻,望各位道友多给我们年轻人一些机会。
最后发布一条招聘消息:
如果你有一颗想用代码来改变世界的信念,那么你来就对了。
招聘地址:http://maimai.cn/job?webjid=AEQgjuZh&srcu=Oj0IP9i8&src=app&from=timeline&isappinstalled=0&setcookie=1
转载于:https://www.cnblogs.com/Kummy/p/4966937.html
如何通过 Vue+Webpack 来做通用的前端组件化架构设计相关推荐
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
谈谈我对前端组件化中"组件"的理解,顺带写个Vue与React的demo 前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的 ...
- 通用服务平台之总体架构设计(一)
一晃从事软件行业已经有多个年头,而从事服务器相关后端开发,也有了不短的时间,维护过中小型系统,也曾亲身设计过小型系统,但是一直都感觉不太顺意,不是自己想要的那种服务体系,很多时候都是在重复造轮子,于是 ...
- Vue学习笔记(2)(组件化开发)
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 组件化 1. 什么是组件化? 组件化是Vue.js中的重要思想 它提 ...
- 前端组件化:vue组件设计思想与遵从原则
组件化的工作方式信奉独立.完整.自由组合.目标就是尽可能把设计与开发中的元素独立化,使它具备完整的局部功能,通过自由组合来构成整个产品. 从页面元素的可复用性角度考虑,我们将将组件按类型分为公众组件. ...
- vue 前端组件化拆分原则(个人总结,非官方)
详尽可转前端组件拆分思路及通信设计(vue2.0)-组件拆分原则-vue组件-vue组件拆分原则 一.公共功能点 例:页头,侧边栏,底部 二.可复用组件 例:购物车卡片等一样样式的地方 三.独立逻辑点 ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- vue+webpack在“双十一”导购产品的技术实践(转发)
双十一中,无线前端的产品可以说非常的丰富.在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现.而今年的双11导购业务占据了5大模块里的后三个,除了必抢, ...
- vue+webpack在“双十一”导购产品的技术实践
双十一中,无线前端的产品可以说非常的丰富.在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现.而今年的双11导购业务占据了5大模块里的后三个,除了必抢, ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
最新文章
- 计算机竞赛CCC可以直接学吗,CCC 计算机竞赛到底有多牛!
- 猎豹MFC--TH_双管道--对管道的操作就想对文件的操作一样
- hdu 5692 Snacks(dfs序+线段树区间更新)
- HLS_error implicit instantiation of undefined template ‘ssdm_int
- 三、案例:留言板 url.parse()
- java时间加减_java时间加减
- android 常用注解,Android 开发小工具之:注解 Annotation
- 漫步最优化二十一——全局收敛
- python reduce函数怎么用的_我如何仅通过使用reduce函数在python中创建单...
- 中文信息处理—已分词标注语料的抽取词表和文本还原
- 提高搜索引擎结果页面排名的各种技术
- ShadowMap Sample
- ABAP:cl_system_uuid=>create_uuid_c32_static( )
- 串口监视软件_力控监控组态软件与西门子S7200
- padavan路由器固件设置ipv6拨号
- 软件测试中期答辩,中期答辩材料创新张颖
- 时空序列预测之Memory In Memory: A Predictive Neural Network for Learning Higher-OrderNon-Stationarity
- matlab调用gams错误,求助:GAMS软件运行中错误报告
- 图数据分析到图卷积神经网络
- keytool运行错误
热门文章
- 当对象或对象属性为空时,如何安全给对象或对象属性添加默认值
- Enlightenment E19 将完整支持 Wayland
- linux-centos7-yum安装mcrypt**
- ARM Linux 3.x的设备树(Device Tree)【转】
- String Reduction问题分析
- C# winform中MouseDoubleClick与DoubleClick的区别
- 浙江大学计算机研究生分数线初试单科学科,2016年浙江大学计算机考研复试分数线_浙江大学考研分数线...
- 单片机初学者做项目为什么这么难?单片机初学者心得有哪些
- flask中使用FileField上传文件的两种方式+前端页面上传文件(flask三种上传文件方式)
- poj2438(哈密顿回路)