{"id":28433409,"url":"https://github.com/log1997/fortunetelling-vue","last_synced_at":"2026-01-30T14:34:06.707Z","repository":{"id":193966258,"uuid":"678669941","full_name":"LOG1997/fortunetelling-vue","owner":"LOG1997","description":"八字算命前端","archived":false,"fork":false,"pushed_at":"2023-09-11T02:10:57.000Z","size":1449,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-30T04:40:43.621Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/LOG1997.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":"2023-08-15T04:45:45.000Z","updated_at":"2023-09-11T01:32:42.000Z","dependencies_parsed_at":"2023-09-11T03:11:17.006Z","dependency_job_id":null,"html_url":"https://github.com/LOG1997/fortunetelling-vue","commit_stats":null,"previous_names":["log1997/fortunetelling-vue"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LOG1997/fortunetelling-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Ffortunetelling-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Ffortunetelling-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Ffortunetelling-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Ffortunetelling-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LOG1997","download_url":"https://codeload.github.com/LOG1997/fortunetelling-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Ffortunetelling-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28914314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T12:13:43.263Z","status":"ssl_error","status_checked_at":"2026-01-30T12:13:22.389Z","response_time":66,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-06-05T18:09:04.976Z","updated_at":"2026-01-30T14:34:06.686Z","avatar_url":"https://github.com/LOG1997.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue3 + Vite4 + Element + Windicss + Bootstrap\n\n## 文件夹介绍\n### 🅰️api\nrequest.ts文件为axios封装，可在此拦截操作请求和回复\n### 🆒components\n组件文件夹，存放公共组件，如SvgIcon图标组件、Table表格组件等\n### 👀hooks\n封装hooks函数，公共函数的提取\n### 🪪icons\n存放图标组件，图标组件使用vite插件vite-plugin-svg-icon引入\n```ts\nplugins[\n    ...\n          createSvgIconsPlugin({\n        // 指定需要缓存的图标文件夹\n        iconDirs: [path.resolve(process.cwd(), \"src/icons\")],\n        // 指定symbolId格式\n        symbolId: \"icon-[dir]-[name]\",\n      }),\n      ...\n]\n```\n使用时在组件内按如下方法使用即可\n```ts\n    \u003csvg-icon :name=\"'menu'\" class=\"svgMenu cursor-pointer\"\u003e\u003c/svg-icon\u003e\n```\n### 🏬layout\n整体的的布局组件，在router文件中根路径下引入。\n包含Header、Main、Footer组件，布局使用了bootstrap的响应式布局\n如菜单列表的写法\n```ts\n    \u003cnav class=\"navbar navbar-expand-lg\"\u003e\n      \u003cdiv class=\"container-fluid\"\u003e\n        \u003cbutton\n          class=\"navbar-toggler\"\n          type=\"button\"\n          data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarSupportedContent\"\n          aria-controls=\"navbarSupportedContent\"\n          aria-expanded=\"false\"\n          aria-label=\"Toggle navigation\"\n        \u003e\n          \u003c!-- \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e --\u003e\n          \u003csvg-icon :name=\"'open'\"\u003e\u003c/svg-icon\u003e\n        \u003c/button\u003e\n        \u003cdiv\n          class=\"nav-list collapse navbar-collapse\"\n          id=\"navbarSupportedContent\"\n        \u003e\n          \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n            \u003cli\n              class=\"nav-item\"\n              v-for=\"item in navList.data\"\n              :key=\"item.id\"\n              @click=\"skip(item.url)\"\n            \u003e\n              \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003e{{\n                item.name\n              }}\u003c/a\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/nav\u003e\n```\n使用媒体查询监听屏幕宽度自适应调整布局\n如Header组件中，屏幕宽度大于1200px时始终保持headeer栏宽度为200px\n```css\n//  @/layout/components/Header.vue\n@media screen and (min-width: 1200px) {\n  .header-container {\n    width: 1200px;\n    margin: 0 auto;\n  }\n}\n```\n\n\n其中Main组件中写入\n```ts\n      \u003crouter-view class=\"main-container-content\"\u003e\u003c/router-view\u003e\n```\n### 🏳️‍⚧️router\n路由管理，使用history模式\n### 🛒store\n状态管理，使用pinia\n### 🍟style\n存放样式文件，模板里主要存放的是主题文件，使用scss。\n文件中的函数以及样式在main.ts中引入过后即可使用\n### 🥅types\n定义的类型和接口\n### 🎊views\n界面组件\n### 🙈App.vue\n界面入口\n### 🧵Main.ts\n项目入口文件\n### 🗽env文件\n根据不同环境配置的路径地址，常量名称必须是`VITE_***`格式，在vite项目中引入时的方式为`import.meta.env.VITE_***`。\n还需要在`vite.config.ts`文件中设置才可引用，具体见文件\n### 🪔vite.config.ts\n配置了icons的引入、elemnet的按需引入和自动注册、element图标的使用、windicss的引入、符号别名的设置、server的设置。\n\n### 📦在.env文件中修改链接\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flog1997%2Ffortunetelling-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flog1997%2Ffortunetelling-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flog1997%2Ffortunetelling-vue/lists"}