{"id":21557106,"url":"https://github.com/shenfe/vue-eleme-tpl","last_synced_at":"2025-06-25T06:05:37.327Z","repository":{"id":143949445,"uuid":"112770116","full_name":"shenfe/vue-eleme-tpl","owner":"shenfe","description":"A common management system frontend boilerplate.","archived":false,"fork":false,"pushed_at":"2018-07-30T03:49:38.000Z","size":187,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T03:28:28.707Z","etag":null,"topics":["cms","element-ui","frontend","management-system","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shenfe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-01T17:53:35.000Z","updated_at":"2018-07-30T03:49:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"59a1b75d-fb8a-4ad6-8a1e-52b8867ff142","html_url":"https://github.com/shenfe/vue-eleme-tpl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shenfe/vue-eleme-tpl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvue-eleme-tpl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvue-eleme-tpl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvue-eleme-tpl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvue-eleme-tpl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shenfe","download_url":"https://codeload.github.com/shenfe/vue-eleme-tpl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvue-eleme-tpl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261816311,"owners_count":23213863,"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":["cms","element-ui","frontend","management-system","vue"],"created_at":"2024-11-24T08:11:04.461Z","updated_at":"2025-06-25T06:05:37.304Z","avatar_url":"https://github.com/shenfe.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-eleme-tpl\n\n\u003e 基于Vue.js框架及其下衍生类库，实现单页面应用。\n\n## 特性\n\n* 使用Vue全家桶\n* 使用element-ui作为基础组件库\n* 使用axios请求后端接口\n* 使用v-charts渲染图表（基于echarts封装）\n* 支持markdown直接写页面组件！\n* 支持json配置页面表单组件！\n* 支持yaml配置接口！\n* 开发、测试、线上三种环境\n\n## 命令\n\n### 本地开发\n\n```\n$ npm run serve\n```\n\n### 为生产环境打包\n\n```\n$ npm run build\n```\n\n### 启动测试服务器\n\n```\n$ npm test\n```\n\n## 文件结构\n\n| 角色 | 目录 | 备注 |\n| :---: | :--- | :--- |\n| 发布的资源 | dist | 前端所有对外发布的静态资源文件，都在这里 |\n| 公共静态资源 | public | 打包后会并入dist |\n| 源码 | src | |\n| 前端路由 | src/router | 单页应用的页面路由由前端控制 |\n| 后端接口调用 | src/api | |\n| 页面组件 | src/view | 构成页面的大组件，参与路由 |\n| 根组件 | src/view/index.vue | 页面主框架 |\n| 模块组件 | src/component | 页面内划分的组件 |\n| 资源文件 | src/asset | 其他公共资源，如图片，字体，公共样式，第三方库等 |\n| mock数据 | mock | 定义接口假数据，用于前端开发及前后端联调，与`src/api`相配合 |\n\n## 开发\n\n### 接口联调\n\n开发环境下，在`vue.config.js`的`devServer`中配置前端本地开发服务器的端口号；另外，前端请求后端接口时，域和端口可能有别于前端devServer，如果需要，则在`src/api/index.js`的API_URL里改动。\n\n### 页面\n\n1. 在view中新建页面级组件\n2. 根据实际情况，适当将页面划分为组件，在component下；并在页面组件中配置子路由\n3. 在router中添加该页面及对应路由路径\n\n### 全局状态\u0026发布订阅\n\n在组件中设置状态：\n\n```js\nthis.$store.set('a.b.c', 1)\n```\n\n在组件中获取状态：\n\n```js\nthis.$store.get('a.b.c')\n```\n\n在组件中订阅状态：\n\n```js\nthis.$store.watch('a.b.c', v =\u003e {\n  console.log(`got a.b.c`, v)\n})\n```\n\n### 图表\n\n使用[v-charts](https://v-charts.js.org)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshenfe%2Fvue-eleme-tpl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshenfe%2Fvue-eleme-tpl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshenfe%2Fvue-eleme-tpl/lists"}