基于 requirejs、vue全家桶、ant design 实现的 antd-vue-pro(模仿版)

一、阅读以前

若是您对项目源码感兴趣，在阅读源码以前，我已经默认了你已经熟练的掌握了HTML/JAVASCRIPT/CSS3 中级编程知识，熟悉 Vue.js，而且对其异步组件加载原理有了深刻的认识，对 Vue 组件 template 中使用 html 模板的注意事项（不能使用PascalCase（首字母大写命名），而须要使用 kebab-case 命名方式，以及自定义组件不能以单标签的方式使用等等）的指示点已经掌握！对 ES六、Promise 的各类使用方式已经熟悉，固然，您得知道 AMD 和 CMD 的区别，以及为何浏览器为何目前 AMD 是主流。本项目中加载组件依赖的方式几乎都是 AMD 配合 Promise 完成。

二、简介

本人后端程序员一枚，业余爱好前端，Vue 做为目前前端煊赫一时的前端技术，其做用不言而喻，既能够直接内嵌在网页中实现咱们网站的一小部分功能，简化咱们的开发！也能够配合打包工具、vue 全家桶构建大型的单页应用。首先得指出，我的以为 Vue SPA 的最佳实践是配合配合打包工具，本项目并不是挑战此最佳实践，而是尝试 Requirejs + Vue + Vuex + Vue-router + axios + ant.design 构建纯前端实现 SPA 的可能性。

项目灵感起源于 http-vue-loader, 一个能够前端直接加载 .vue 文件的库, 看起来很神奇，因而笔者去研究了它的源码，其原理不是很复杂，却让笔者萌生了直接使用 http-vue-loader 构建一个纯前端 SPA 的想法。固然，在落地的过程当中遇到了不少坑，若是不懂 http-vue-loader 原理，这个项目你是不可能实现的，所以，本项目的 http-vue-loader 已经被笔者优化了，其中包括: style 样式局部化优化（很重要），script 模块加载优化（重要），template 优化（配合 style 优化），网络加载器缓存控制优化。

本项目基于 vue-antd-admin 改造，.vue 文件类似度 80% 以上，但不兼容，毕竟是纯前端的版本，CMD 方式的模板加载是不支持的。

三、预览地址

require-vue-admin

四、项目特点

• vue 文件几乎和 CMD 方式一致
• vue 组件支持异步组件、非异步组件(本项目中未用到)
• 支持别名加载依赖，加载组件（很重要），eg:
  • @ 根路径
  • @CMP components 路径
  • @IMG 图片路径
  • 更多请查看 ~/static/require-config/modules/config.js 配置
• 支持局部样式（很重要）
• vue 文件支持 ES6 语法
• 支持 development、production 环境
• 缓存支持（生产环境更新缓存只须要修改全局 version 便可更新）（很重要）
• 权限系统（完善中...）

五、注意事项

项目中有许多依赖依赖于 cdn，本地构建服务访问请确保网络畅通。

六、最后的话

先开源在这里，项目不支持 IE，若是有问题可留言笔者。