Vue3-Genius-CLI

项目简介

Vue3-Genius-CLI 是一个专业高效的命令行工具，旨在帮助开发者快速搭建和开发基于 Vue3 的前端项目。通过自动化配置和代码生成，极大提升开发效率。

安装

全局安装

# 使用npm安装
npm install -g vue3-genius-cli

# 或使用yarn安装
yarn global add vue3-genius-cli

# 或使用pnpm安装
pnpm add -g vue3-genius-cli

从源代码安装

# 克隆仓库
git clone https://github.com/JIAXInT/vue3-genius-cli.git

# 进入项目目录
cd vue3-genius-cli

# 安装依赖
npm install

# 链接到全局
npm link

核心功能

1. 项目创建

一键创建基于 Vue3 + TypeScript + Vite 的项目脚手架，自动完成以下配置：

• 规范的目录结构：提供业界最佳实践的文件组织方式
• 预配置的 vue.config.js：包含路径别名等常用配置
• Axios 网络请求封装：自动安装并提供二次封装的请求库
• Vue-Router 配置：预设路由系统，支持动态路由加载
• Pinia 状态管理：新一代 Vue 状态管理方案
• Vite 和 TypeScript：优化的构建工具与类型系统配置

使用方法

vue3-genius-cli create your_project_name

执行后，CLI 将自动：

1. 拉取项目模板
2. 安装项目依赖
3. 启动开发服务器
4. 打开浏览器访问 http://localhost:5173/

2. 组件开发工具

创建 Vue 组件

# 默认将组件存放到 src/components 文件夹中
vue3-genius-cli addcpn YourComponentName

# 指定组件存放路径
vue3-genius-cli addcpn YourComponentName -d src/pages/home

创建 Vue 页面并配置路由

# 默认创建到 src/views/your-page-name/YourPageName.vue，并生成对应的 router.ts
vue3-genius-cli addpage YourPageName

# 指定页面存放路径
vue3-genius-cli addpage YourPageName -d src/views

路由自动集成机制：

CLI 创建的页面会自动生成 router.ts 文件，该文件会被 src/router/index.ts 自动加载，无需手动配置。系统采用以下方式动态加载路由：

// 动态加载所有视图目录中的路由文件
const modules = import.meta.glob("../views/**/**/router.ts", { eager: true });
const dynamicRoutes = Object.values(modules).map((module) => module.default);

// 添加到路由配置中
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...dynamicRoutes],
});

创建 Pinia 状态模块

# 默认创建到 src/store/modules/your-store-name 目录下 index.ts 和 types.ts
vue3-genius-cli addstore YourStoreName

# 指定存储模块存放路径
vue3-genius-cli addstore YourStoreName -d src/store/modules

创建的状态模块会被自动集成到主 Pinia 存储中，无需手动引入和配置。状态模块自动加载机制如下：

// 自动导入所有模块
const modules = import.meta.glob("./modules/**/**/index.ts", { eager: true });

使用示例

创建新项目并开发一个计数器功能

# 创建新项目
vue3-genius-cli create my-counter-app
cd my-counter-app

# 创建状态模块
vue3-genius-cli addstore Counter

# 创建页面
vue3-genius-cli addpage Counter

# 启动开发服务器
npm run dev

然后在 src/store/modules/counter/index.ts 中实现计数器逻辑：

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),

  getters: {
    doubleCount: (state) => state.count * 2,
  },

  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

在 src/views/counter/Counter.vue 页面中使用：

<template>
  <div>
    <h1>计数器: {{ counterStore.count }}</h1>
    <button @click="counterStore.increment()">增加</button>
    <button @click="counterStore.decrement()">减少</button>
    <p>双倍值: {{ counterStore.doubleCount }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/store/modules/counter";

const counterStore = useCounterStore();
</script>

技术优势

• 开箱即用：一键生成项目，节约配置时间
• 规范统一：保持团队代码风格和架构一致性
• 自动化集成：路由和状态模块自动注册
• 灵活可定制：支持自定义存放路径和配置选项

适用场景

适合中小型团队快速启动 Vue3 项目，尤其是需要统一技术栈和开发规范的场景。

贡献指南

欢迎提交 Issue 或 Pull Request 来帮助改进这个项目。

许可证

MIT