如何通过 Vue+Webpack 来做通用的前端组件化架构设计 如何通过 Vue+Webpack 来做通用的前端组件化架构设...
\u5982\u4f55\u901a\u8fc7 Vue+Webpack \u6765\u505a\u901a\u7528\u7684\u524d\u7aef\u7ec4\u4ef6\u5316\u67b6\u6784\u8bbe\u8ba1\u5c31\u662f\u4e00\u4e2a\u5de5\u5177\uff0c\u4e0e\u4e4b\u524d\u7684\u90a3\u4e9b\u5f00\u6e90\u73a9\u610f\u513f\u6ca1\u6709\u672c\u8d28\u533a\u522b\u3002
\u5148\u5b66\u4e60\u5b83\uff0c\u638c\u63e1\u5b83\u3002\u7136\u540e\u53bb\u7528\u5457\uff01
\u4e3a1.\u4e3a\u4ec0\u4e48\u7528webpack?\u4ed6\u50cfBrowserify,\u4f46\u662f\u5c06\u4f60\u7684\u5e94\u7528\u6253\u5305\u4e3a\u591a\u4e2a\u6587\u4ef6.\u5982\u679c\u4f60\u7684\u5355\u9875\u9762\u5e94\u7528\u6709\u591a\u4e2a\u9875\u9762,\u90a3\u4e48\u7528\u6237\u53ea\u4ece\u4e0b\u8f7d\u5bf9\u5e94\u9875\u9762\u7684\u4ee3\u7801.\u5f53\u4ed6\u4e48\u8bbf\u95ee\u5230\u53e6\u4e00\u4e2a\u9875\u9762,\u4ed6\u4eec\u4e0d\u9700\u8981\u91cd\u65b0\u4e0b\u8f7d\u901a\u7528\u7684\u4ee3\u7801.\u4ed6\u5728\u5f88\u591a\u5730\u65b9\u80fd\u66ff\u4ee3Grunt\u8ddfGulp\u56e0\u4e3a\u4ed6\u80fd\u591f
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也还狠年轻，望各位道友多给我们年轻人一些机会。
扩展阅读：为什么vue3不推荐用vuex了 ... webpack打包vue项目步骤 ... webpack5 vue ... vue 流程图 添加删除 ... webpack打包全过程 ... webpack配置 ... webpack打包原理阮一峰 ... vue webpack打包原理 ... 为什么vue不适合大型项目 ...
