{"id":16294294,"url":"https://github.com/coder-hxl/coderhxl","last_synced_at":"2026-05-15T21:39:13.082Z","repository":{"id":37370410,"uuid":"504416301","full_name":"coder-hxl/coderhxl","owner":"coder-hxl","description":"coderhxl 是一个快速搭建和开发前端项目的 CLI 。","archived":false,"fork":false,"pushed_at":"2022-07-18T10:42:04.000Z","size":72,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-28T23:51:32.311Z","etag":null,"topics":["cli","vue","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/coder-hxl.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}},"created_at":"2022-06-17T06:17:15.000Z","updated_at":"2024-03-19T13:51:22.000Z","dependencies_parsed_at":"2022-08-19T14:10:46.710Z","dependency_job_id":null,"html_url":"https://github.com/coder-hxl/coderhxl","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coder-hxl/coderhxl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-hxl%2Fcoderhxl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-hxl%2Fcoderhxl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-hxl%2Fcoderhxl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-hxl%2Fcoderhxl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coder-hxl","download_url":"https://codeload.github.com/coder-hxl/coderhxl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-hxl%2Fcoderhxl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33080779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T20:25:35.270Z","status":"ssl_error","status_checked_at":"2026-05-15T20:25:34.732Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["cli","vue","web"],"created_at":"2024-10-10T20:14:49.055Z","updated_at":"2026-05-15T21:39:13.064Z","avatar_url":"https://github.com/coder-hxl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cdiv id=\"cn\"\u003ecoderhxl\u003c/div\u003e\n\ncoderhxl 是一个快速搭建和开发前端项目的 CLI 。\n\n语言: **简体中文** | \u003ca href=\"#en\" style=\"color: #2177b8; text-decoration: none\"\u003eEnglish\u003c/a\u003e\n\n## 为什么要使用 coderhxl\n无需每次创建项目都要从零构建, 减少重复工作。\n\n* 通过 coderhxl 创建的项目是基于 Vite , 并且做了很多配置, 比如: 对 axios 进行封装, 动态导入路由配置。详情在 \u003ca href=\"#cn-vue\" style=\"color: #2f90b9; text-decoration: none\"\u003eVue\u003c/a\u003e 部分 。\n\n* 在一个项目中, 必定要创建很多组件, 同时也需要配置对应的路由。比如有 15 个,  依次创建组件再配置路由必然是个\u003cu\u003e重复工作, 效率低\u003c/u\u003e。 而通过 coderhxl 的一条命令，一键创建一个组件并自动配置路由再搭配 coderhxl 配置的自动导入路由功能给 vue-router 导入所有路由配置, \u003cu\u003e效率高\u003c/u\u003e。\n\n## 安装\n使用 NPM: \n\n```shell\nnpm install coderhxl -g\n```\n\n使用 Yarn:\n```shell\nyarn add coderhxl -g\n```\n\n使用 PNPM：\n```shell\npnpm add coderhxl -g\n```\n\n## \u003ch2 id=\"cn-vue\"\u003eVue 项目\u003c/h2\u003e\ncoderhxl 目前支持 Vue 项目, 后续会考虑 React 项目。\n\n### 创建项目\n\n项目配置:\n\n- 常见的目录结构\n- vite.config.js  (配置别名)\n- axios (axios 的安装和配置, 进行了二次封装)\n- vue-router (vue-router 的安装和配置, 采用动态导入路由)\n- Pinia (Pinia 的安装和配置)\n\n```shell\ncoderhxl create \u003cproject\u003e\n```\n\n### 创建组件\n\n创建的组件使用的是 \u003cscript setup\u003e 写法\n\n```shell\ncoderhxl add-cpn \u003cname\u003e \ncoderhxl add-cpn main # 默认创建到 src/components\ncoderhxl add-cpn main -d src/components # 指定创建到 src/components\n```\n\n### 创建状态管理\n\n状态管理采用 pinia ( Vue 官方推荐的状态管理)\n\n```shell\ncoderhxl add-pinia \u003cname\u003e \ncoderhxl add-pinia main # 默认创建到 src/store/main \ncoderhxl add-pinia main -d src/store/main # 指定创建到 src/store/main\n```\n\n### 创建路由配置\n\n组件 \u003cscript setup\u003e 写法, 并配置好对应的路由信息 (懒加载方式)\n\n#### 写法1\n```shell\ncoderhxl add-page \u003cname\u003e \ncoderhxl add-page main # 默认创建到 src/views \ncoderhxl add-page main -d src/views # 指定创建到 src/views\n```\n\n#### 写法2\n```shell\ncoderhxl add-page2 \u003cname\u003e\ncoderhxl add-page2 main # 组件默认创建到 src/views/main , 路由配置默认创建到 src/router/main\ncoderhxl add-page2 main -d src/views/main # 指定将组件创建到 src/views/main , 路由配置创建到 src/router/main\n```\n\n## 更多\n请在命令行工具中运行:\n```shell\ncoderhxl -h\n```\n\n如有问题请在 https://github.com/coder-hxl/coderhxl 中提 Issues 。\n\n\n\n\n\n------\n\n\n\n\n\n# \u003cdiv id=\"en\"\u003ecoderhxl\u003c/div\u003e\n\ncoderhxl is a CLI for quickly building and developing front-end projects.\n\nlangue: \u003ca href=\"#cn\" style=\"color: #2177b8; text-decoration: none\"\u003e简体中文\u003c/a\u003e | **English**\n\n## Why use coderhxl\nYou don't have to build from scratch every time you create a project, reducing repetitive work.\n\n* There is no need to configure from zero every time you create a project. The project created by coderhxl is based on Vite, and has done a lot of configuration, such as: encapsulate axios, dynamically import routing configuration, the details are in the \u003ca href=\"#en-vue\" style=\"color: #2f90b9; text-decoration: none\"\u003eVue\u003c/a\u003e project section 。\n* In a project, many components must be created, and corresponding routes also need to be configured. For example, if there are 15, creating a component step by step and then configuring a route is bound to be a \u003cu\u003erepetitive task\u003c/u\u003e, \u003cu\u003ewhich is inefficient\u003c/u\u003e. And through a command of coderhxl, one-click to create a component and automatically configure routing and then use the automatic import routing function of codehxl configuration to import all routing configurations to vue-router, \u003cu\u003ehigh efficiency\u003c/u\u003e.\n* .\n\n\n## Install\nUsing NPM: \n\n```shell\nnpm install coderhxl -g\n```\n\nUsing Yarn:\n```shell\nyarn add coderhxl -g\n```\n\nUsing PNPM：\n```shell\npnpm add coderhxl -g\n```\n\n## \u003ch2 id=\"en-vue\"\u003eVue project\u003c/h2\u003e\ncoderhxl currently supports Vue projects, and will consider React projects in the future.\n\n### Create project\n\nproject configuration:\n\n- Common directory structure\n- vite.config.js (config alias)\n- axios (installation and configuration of axios, secondary packaging)\n- vue-router (installation and configuration of vue-router, using dynamic import routing)\n- Pinia (installation and configuration of Pinia)\n\n```shell\ncoderhxl create \u003cproject\u003e\n```\n\n### Create components\n\nThe component created is written in \u003c script setup \u003e.\n\n```shell\ncoderhxl add-cpn \u003cname\u003e \ncoderhxl add-cpn main # Create to src/components by default\ncoderhxl add-cpn main -d src/components # Specify to create to src/components\n```\n\n### Create state management\n\nState management adopts pinia (state management officially recommended by Vue)\n\n```shell\ncoderhxl add-pinia \u003cname\u003e \ncoderhxl add-pinia main # Create to src/store/main by default\ncoderhxl add-pinia main -d src/store/main # Specify to create to src/store/main\n```\n\n### Create routing route\n\nComponent \u003c script setup \u003e is written, and the corresponding routing information is configured (lazy loading mode)\n\n#### Write method 1\n\n```shell\ncoderhxl add-page \u003cname\u003e \ncoderhxl add-page main # Create to src/views by default\ncoderhxl add-page main -d src/views # Specify to create to src/views\n```\n\n#### Write method 2\n\n```shell\ncoderhxl add-page2 \u003cname\u003e\ncoderhxl add-page2 main # Components are created to src/views/main by default, and routing configuration is created to src/router/main by default\ncoderhxl add-page2 main -d src/views/main # Specify that components are created to src/views/main and routing configuration is created to src/router/main\n```\n\n##More\n\nRun the command line tool:\n\n```shell\ncoderhxl -h\n```\n\nIf you have any questions, please mention Issues in https://github.com/coder-hxl/coderhxl.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoder-hxl%2Fcoderhxl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoder-hxl%2Fcoderhxl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoder-hxl%2Fcoderhxl/lists"}