如何通过 Vue+Webpack 来做通用的前端组件化架构设计

　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全局的插件库，比如：请求加载、d框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。

views 文件夹： 用来存放页面模块

app.vue 文件：第一次启动的主程序模块

app.js 文件：启动前的加载，注入，实例化

router.config.js 文件：路由模块

目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。

import tkinter

window = tkinter.Tk()

window.title('电话计费')

window.geometry('260x170')

def calculate():

call = var.get()

min = e1.get()

if call == '0':

money = 0.40*int(min)

l2.config(text='国内长途'+str(min)+'分钟，话费'+str('%.2f'%money)+'元')

else:

money = 0.20*int(min)

l2.config(text='本地通话'+str(min)+'分钟，话费'+str('%.2f'%money)+'元')

var=tkinter.StringVar()

var.set(0)

b1 = tkinter.Radiobutton(window,text='国内长途',variable=var,value=0)

b1.pack()

b2 = tkinter.Radiobutton(window,text='本地通话',variable=var,value=1)

b2.pack()

l1 = tkinter.Label(window, text='输入通话时长')

l1.pack()

e1 = tkinter.Entry(window, width=20)

e1.pack()

b3 = tkinter.Button(window, text="计算", command=calculate)

b3.pack()

l2=tkinter.Label(window,text='')

l2.pack()

window.mainloop()

注意缩进

效果图

Webpack 函数的核⼼逻辑是：根据配置⽣成编译器实例 compiler，然后处理参数，执⾏ WebpackOptionsApply().process，根据参数加载不同内部插件。在有回调函数的情况下，根据是否是 watch 模式来决定要执⾏ compiler.watch 还是 compiler.run。

Webpack 引擎基于插件系统搭建⽽成，不同的插件各司其职，在 Webpack ⼯作流程的某⼀个或多个时间点上，对构建流程的某个⽅⾯进⾏处理。

⼀个 Webpack 插件是⼀个包含 apply ⽅法的 JavaScript 对象。这个 apply ⽅法的执⾏逻辑，通常是注册 Webpack ⼯作流程中某⼀⽣命周期 Hook，并添加对应 Hook 中该插件的实际处理函数。

---