Vue3 + Vite 自定义脚手架

一个灵活的 Vue3 + Vite 自定义脚手架，支持通过命令行交互配置项目，自动生成规范的项目结构和依赖。

特性

• 支持选择纯 JS、纯 TS 或 JS/TS 混合项目
• 自动安装常用依赖（axios、vue-router、pinia 等）
• 支持配置私有镜像源和依赖前缀
• 预设规范的项目目录结构
• 内置 Docker 配置支持
• 可选择安装额外模块（ESLint、jhk-fe 等）
• 预设 axios 封装和 API 管理

安装

全局安装脚手架

npm install -g vue3-custom-scaffold

使用方法

创建新项目

vue3-scaffold create <项目名称> 例如：vue3-scaffold create my-project

命令行配置选项

创建项目时，脚手架会引导你完成一系列配置：

1. 项目类型选择：纯 JS、纯 TS 或混合模式
2. 依赖源配置：
   • 镜像源地址（默认：https://registry.npmjs.org）
   • 私有依赖前缀（如 @jhk/）
3. Docker 配置：
   • 代码包名称（默认：项目名.tar）
   • 暴露端口（默认：80）
4. 可选模块安装：
   • ESLint
   • jhk-fe 组件库
   • vue-i18n 国际化插件

生成的项目结构

项目根目录/ ├── node_modules/ ├── src/ │ ├── api/ # API请求目录 │ │ ├── index.js/ts # API出口文件 │ │ └── api-service.js/ts # axios封装 │ ├── hook/ # 自定义钩子目录 │ │ └── index.js/ts # 钩子出口文件 │ ├── constant/ # 常量目录 │ │ └── index.js/ts # 常量定义 │ ├── views/ # 页面组件目录 │ │ └── Home.vue # 默认首页 │ ├── App.vue # 根组件 │ └── main.js/ts # 入口文件 ├── config/ │ └── server.conf # 服务器配置 ├── Dockerfile # Docker配置文件 ├── .eslintrc.js # ESLint配置（可选） ├── .npmrc # npm配置 ├── index.html # 入口HTML ├── package.json # 项目依赖配置 ├── vite.config.js/ts # Vite配置 └── tsconfig.json # TypeScript配置（TS项目）

后续开发

项目创建完成后，可以通过以下命令启动开发服务器： cd <项目名称> npm install npm run dev

自定义配置

你可以根据需要修改以下文件：

1. config/server.conf：服务器配置
2. src/api/api-service.js/ts：axios 封装配置
3. .eslintrc.js：ESLint 规则配置
4. vite.config.js/ts：Vite 构建配置

发布历史

• 1.0.0：初始版本