Vue前端架构思考

最近学习Vue所以在，所里这里记录下自己对Vue前端架构的个人见解！

架构需要用到的知识点：

1. gulp + webpack 构建打包工具，使用了一系列的loader，比如：vue-loader, url-loader, babel-loader ,以及 postcss等等
2. vue-loader （vue文件组件化）:用来去编译处理*.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件.
3. babel-loader ：实现对vue文件中es6 语法的编译解析
4. vue-router ：用来做路由分发
5. postcss-custom-properties :用来做样式全局化, 只需要通过变量去维护，通过编译变量既可以换肤。
6. vuex: 本地状态管理缓存。有人会将数据存储在Vuex中，也有人习惯仅仅将vuex用作状态管理数据存储在sessionStorge中。具体是vuex中还是sessionStorge中或者是cookie中具体业务要具体分析。个人喜欢利用vuex进行模块化状态管理。
7. 通信安全库

项目文件结构

• router  文件：路由模块
• app.js 文件：启动前的加载，注入，实例化
• app.vue 文件：第一次启动的主程序模块
• views 文件夹: 用来存放页面模块
• api文件夹：网络请求模块包含各个功能Api
• components 文件夹：用来放独立的组件，建议后期做细分，ui 组件，page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。
• assets文件夹：包括image资源文件和全局公共style less文件。image建议细分用功能文件夹放，便于查找。
• utils文件夹:工具类文件，比如正则校验文件，时间格式转换文件
• static文件夹：assets被webpack处理静态资源，但是static不会，所以需要使用绝对引用。
• store文件夹：数据存储相关文件夹。

后面继续学习心得再来完善