# require-vue-admin

**Repository Path**: MyQQGame/require-vue-admin

## Basic Information

- **Project Name**: require-vue-admin
- **Description**: 基于 requirejs、vue全家桶、ant design 实现盗版 antd-vue-pro
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2022-07-13
- **Last Updated**: 2023-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1、背景介绍

项目灵感起源于 `http-vue-loader`，它可以实现在浏览器上直接加载 `.vue` 格式的的文件运行。于是笔者阅读了它的代码，理解源码之后，想着能否让如今市面上流行的后台管理模板直接浏览器上运行起来但是却不用使用打包工具，于是便有了这个项目！

理想很丰满，显示很骨感，当我看上这个 `antd-vue-admin` 这个项目，并且准备迁移之后，却发现了 `http-vue-loader` 许多不足的地方，并不能满足单页面项目去打包工具化的需求，其缺陷如下：

- style 局部化样式虽然支持，但是有时候会失效，而且存在重复创建相同组件 style 标签问题
- script 中如果需要引入局部组件的时候方式不够灵活，也存在路径写死的问题。
- script 中加载其他模块只能全局定义，不能在 script 中加载，这导致当依赖的外部模块越来越多的时候，全局初始化的模块会越来越多，有回到了一锅粥的时代，模块化依赖形同虚设
- 不支持别名定义，导致加载局部组件通常只能写全路径，第一不方便，第二会使组件位置重构变得困难。
- 动态加载的单文件没有生成源码调试链接，调试麻烦，只能 console.log 或者 debugger。
- 异常提示不完善，bug 定位困难。
- 不支持热加载，严重影响开发效率和心情>-<。
- ...

上述的问题均已解决，具体可以参看 `static\require-config\modules\http-vue-loader.js` 文件，该文件也可以脱离此项目单独使用，使用方法见：

> 本项目基于 [vue-antd-admin](https://gitee.com/iczer/vue-antd-admin) 改造，.vue 文件相似度 80% 以上，但不兼容，当然有兴趣的小伙伴可以写相应插件支持。

## 2、预览地址

[require-vue-admin](http://dreamcatcher_yxc.gitee.io/require-vue-admin/index.html)

## 3、项目特色

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

## 4、热加载服务

热加载模块位于 `~/static/hot-reload-server` 文件夹，启动方式如下：
```
# 安装依赖
> npm install
# 启动
> node index.js
```
配置说明加  `~/static/hot-reload-server/config.yml` 注释。

## 5、待办

- 添加 http-vue-loader + vant 示例。

## 6、最后的话

代码中的重要模块 `http-vue-loader` 已经添加注释，在阅读理解源码之前，建议掌握如下知识点：

- HTML/JAVASCRIPT/CSS3 中级编程知识
- 熟悉 Vue.js，并且对其异步组件加载原理有大概的认识
- 对 Vue 组件 template 中使用 html 模板的注意事项(具体可以参看 Vue 官方文档说明)
- 熟悉 Promise 编程
- 什么是 AMD、CMD 模块化

> 项目不支持 IE，如果有问题可留言笔者。