{"id":13536482,"url":"https://github.com/silianpan/eagles","last_synced_at":"2025-04-12T00:31:34.655Z","repository":{"id":105327840,"uuid":"91161998","full_name":"silianpan/eagles","owner":"silianpan","description":"eagles for vue componets of silianpan","archived":false,"fork":false,"pushed_at":"2020-08-31T02:35:44.000Z","size":3001,"stargazers_count":103,"open_issues_count":4,"forks_count":33,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-25T20:33:35.609Z","etag":null,"topics":["axios","custom-theme","echars","element-ui","hightopo","koa2","vue-awesome","vue2","vue2-i18n"],"latest_commit_sha":null,"homepage":"https://silianpan.github.io/eagles_dist/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/silianpan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-05-13T08:59:44.000Z","updated_at":"2023-04-08T01:43:31.000Z","dependencies_parsed_at":"2023-05-18T05:31:01.475Z","dependency_job_id":null,"html_url":"https://github.com/silianpan/eagles","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2Feagles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2Feagles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2Feagles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silianpan%2Feagles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/silianpan","download_url":"https://codeload.github.com/silianpan/eagles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501267,"owners_count":21114640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","custom-theme","echars","element-ui","hightopo","koa2","vue-awesome","vue2","vue2-i18n"],"created_at":"2024-08-01T09:00:40.254Z","updated_at":"2025-04-12T00:31:33.859Z","avatar_url":"https://github.com/silianpan.png","language":"JavaScript","readme":"---\ntitle: vue2 eagles项目爬坑之路 —— 各种组件封装\ndate: 2017-05-13 17:43:03\ntags: vue2 vue-i18n element-ui axios custom-theme hightopo echars vue-awesome koa2\n---\n\u003c!-- \u003cdiv align=center\u003e --\u003e\n![04113_london_320x240](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/04113_london_320x240.jpg)\n\u003c!-- \u003c/div\u003e --\u003e\n\n[在线演示](https://silianpan.github.io/eagles/)\n\n[在线演示2](http://twofloor.oschina.io/eagles_dist)\n\n## 前言\n\u003e \u0026emsp;经过两个多星期的开发与整理，继我的第一篇原创博客[《从C/C++到前端转型之路》](https://silianpan.github.io/2017/05/09/road/)后，终于推出了Eagles项目，为什么取名为Eagles呢？Eagles表示雄鹰，就像神雕侠侣中雕兄展翅战胜蟒蛇一样。本项目采用vue+axios+elementui技术，集成了vuex状态管理，vue-awesome字体图标库，vue-i18n国际化，mockjs模拟api数据提交，支持sass样式编译。开发了非常适合项目的低耦合组件，如：树表、拓扑图、表格、图表等，还附加菜单管理、角色权限管理、用户管理等通用项目模块。\n\n\u0026emsp;后台技术栈暂时采用mockjs模拟Ajax数据提交，后面会用spring boot+mybatis技术给大家娓娓道来。最近也在研究spring cloud与docker微服务架构实战，后面也会有相应文章给大家分享，共同进步！\n\n方便大家交流，已开QQ群，\u003cspan style=\"color:rgb(228, 183, 22);\"\u003e613176270\u003c/span\u003e，欢迎大家畅所欲言，温馨提示：群里有妹子哟！\n\n## 功能\n- 登录/注销\n- token验证\n- 不同风格菜单栏\n- 自定义换肤主题\n- 国际化支持\n- 表格\n- 树表\n- 拓扑图组件\n- 图表\n- 右侧弹窗\n- 可移动对话框\n- 富文本\n- Markdown\n- JSON美化\n- 列表拖拽\n- 权限管理\n- 日志管理\n- 用户管理\n- 菜单管理\n- 数据管理\n- 图形设计器\n- 开发/部署两种模式\n- mack模拟ajax请求数据\n- vuex状态管理模块化\n- Ajax请求进度条\n- sass样式支持\n- 事件中心实现\n\n## 编译运行\n\n``` bash\n# 克隆项目\ngit clone https://github.com/silianpan/eagles.git\n\n# 安装依赖\nnpm install\n\n# 运行 访问 localhost:8080\nnpm run dev\n\n# 编译\nnpm run build\n\n# 待分析报告的编译\nnpm run build --report\n```\n\n## 目录结构说明\n```shell\n|-- build                           # 编译目录\n|-- config                          # 编译配置目录\n|-- index.html                      # 首页模板\n|-- package.json                    # 依赖库配置\n|-- src                             # 源码目录\n|   |-- api                         # api目录\n|   |-- assets                      # 资源目录\n|   |   |-- css                     # 样式目录\n|   |   |-- img                     # 图片\n|   |   |-- sass                    # sass\n|   |   `-- theme                   # 自定义主题目录\n|   |-- common                      # 公共js库\n|   |   |-- eventHubs.js            # 事件中心\n|   |   |-- resTypeEnum.js          # 资源类型\n|   |   `-- topo                    # 拓扑图\n|   |-- components                  # 通用组件\n|   |   |-- Table.vue               # 表格\n|   |   |-- topo                    # 拓扑图\n|   |   `-- treeTable               # 树表组件\n|   |-- config.js                   # 全局配置\n|   |-- i18n                        # 国际化\n|   |-- libs                        # 第三方组件库\n|   |-- main.js                     # 入口程序\n|   |-- mock                        # 模拟数据目录\n|   |-- router                      # 路由\n|   |-- store                       # 状态管理目录\n|   |-- utils                       # 工具目录\n|   `-- views                       # 业务类型组件\n|       |-- introduction            # 简介\n|       |-- lang                    # 语言设置\n|       |-- layout                  # 布局：header、菜单\n|       |-- login                   # 登录\n|       |-- table                   # 表格演示\n|       |-- topo                    # 拓扑图演示\n|       `-- treeTable               # 树表演示\n`-- static                          # 静态资源目录\n    `-- img                         # 图片目录\n```\n\n## 部分截图\n#### \u0026emsp;首页\n![home](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/home.png)\n\n#### \u0026emsp;换肤\u0026表格\n![skin](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/skin.png)\n\n#### \u0026emsp;国际化\u0026树表\n![i18n](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/i18n.png)\n\n#### \u0026emsp;拓扑图\n![topo](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/topo.png)\n\n![topo2](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/topo2.png)\n\n#### \u0026emsp;不同风格菜单\n![menu](https://github.com/silianpan/silianpan.github.io/blob/master/2017/05/13/vue2/menu.png)\n\n## 爬坑之路\n#### \u0026emsp;Jquery组件的正确引用\n\u0026emsp;在package.json中加入jquery\n```javascript\n\"jquery\": \"^1.11.1\"\n```\n\u0026emsp;在webpack.base.conf.js后加入如下代码，在之前要引入webpack\n```javascript\nvar webpack = require(\"webpack\")\n\nplugins: [\n   new webpack.optimize.CommonsChunkPlugin('common.js'),\n   new webpack.ProvidePlugin({\n       jQuery: \"jquery\",\n       $: \"jquery\"\n   })\n  ]\n```\n\u0026emsp;在main.js中引入jquery\n```javascript\nimport $ from 'jquery'\n```\n#### \u0026emsp;国际化兼容问题\n\u0026emsp;国际化采用vue-i18n,但是只能使用5.x版本，使用6.x版本会发生和element兼容性问题，导致原声的element无法翻译\n\u0026emsp;和Element兼容国际化引入\n```javascript\nimport enUS from './en-US.json'\nimport zhCN from './zh-CN.json'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nexport const LANGS = {\n    'en-US': $.extend(enUS, enLocale),\n    'zh-CN': $.extend(zhCN, zhLocale)\n}\n```\n#### \u0026emsp;nginx部署问题\n\u0026emsp;vue路由热加载组件，会导致部署到Nginx后，组件无法切换的问题（切换失败）\n\u0026emsp;所以如果部署到Nginx，在路由中，只能使用import加载组件\n#### \u0026emsp;静态资源访问问题\n\u0026emsp;部署到Nginx后，所有静态资源访问出现404（访问失败）\n\u0026emsp;原因：vue中src目录下所有的资源文件都要进行编译转码，原先用引用的静态文件将会出错，如img标签引用的静态图片文件\n\u0026emsp;解决办法：将静态资源放入到和src同级的static目录，并引用此目录下文件，但是重要的一点是：开发模式和生产模式引用的static路径会有不同，于是在配置文件中加入如下代码，来区分开发模式和生产模式：\n```javascript\nexport const STATIC_IMAGEPATH = (process.env.NODE_ENV === 'production') ? \"./static/img/\": \"/static/img/\";\n```\n\u0026emsp;另外, config/index.js下，assetsPublicPath也是不同\n```javascript\nassetsPublicPath: './', //生产环境assetsPublicPath: '/'\n```\n#### \u0026emsp;开发模式和部署不是代理后台服务设置\n\u0026emsp;在config/index.js中配置proxyTable\n```javascript\nproxyTable: {\n    '/ajax': {\n      target: 'http://127.0.0.1:8080',\n      // target: 'http://127.0.0.1:8081',\n      changeOrigin: true,\n      pathRewrite: {\n        '^/ajax': '/dirms-service'\n      },\n      onProxyReq (proxyReq, req, res) {\n      }\n    }\n  },\n```\n\u0026emsp;在config中加入如下，其中eagles-service为生产模式下的后台服务访问标识\n```javascript\nexport const API_BASEURL = (process.env.NODE_ENV === 'production')? \"/eagles-service\":\"/ajax\";\n```\n## todo list\n- 完成并完善剩下功能\n- 寻找其他NB开源组件并封装，如D3等\n- 完善后台项目，并搭建微服务架构\n\n## 欢迎大家star和issue\n[项目地址](https://github.com/silianpan/eagles.git)\n\n[在线演示](https://silianpan.github.io/eagles/)\n\n[在线演示2](http://twofloor.oschina.io/eagles_dist)\n\n[个人博客](https://silianpan.github.io/)\n\nQQ群：\u003cspan style=\"color:rgb(228, 183, 22);\"\u003e1063679722\u003c/span\u003e\n","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilianpan%2Feagles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsilianpan%2Feagles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilianpan%2Feagles/lists"}