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文件夹:数据存储相关文件夹。

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

发布了30 篇原创文章 · 获赞 16 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Asia_ZhangQQ/article/details/100041862