# jz-ifame-father

**Repository Path**: chen-lexiang/jz-ifame-father

## Basic Information

- **Project Name**: jz-ifame-father
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-10
- **Last Updated**: 2025-06-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jz-ifame-father

🚀 基于 Vue 3 + Vite + TypeScript 构建的现代化前端项目

## 项目介绍

jz-ifame-father 是一个现代化的前端开发框架，采用最新的技术栈构建，为开发者提供高效、可维护的开发环境。项目具有完整的类型安全、组件化架构和优雅的用户界面。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架，使用 Composition API
- **Vite** - 下一代前端构建工具，提供极速的开发体验
- **TypeScript** - JavaScript 的超集，提供静态类型检查
- **Vue Router** - Vue.js 官方路由管理器
- **Pinia** - Vue 的状态管理库，替代 Vuex
- **SCSS** - CSS 预处理器，提供强大的样式功能
- **Vitest** - 基于 Vite 的单元测试框架

## 项目特性

- ⚡ **极速开发** - 基于 Vite 的热模块替换（HMR）
- 🎯 **类型安全** - 完整的 TypeScript 支持
- 📱 **响应式设计** - 移动端优先，适配各种设备
- 🧩 **组件化** - 可复用的组件架构
- 🎨 **现代化 UI** - 优雅的用户界面设计
- 🔧 **开发友好** - 完善的开发工具链
- 📦 **模块化** - ES6+ 模块系统
- 🛠️ **可扩展** - 易于扩展和自定义

## 项目结构

```
jz-ifame-father/
├── public/                 # 静态资源
│   └── vite.svg           # 项目图标
├── src/                   # 源代码目录
│   ├── assets/            # 静态资源
│   │   └── HelloWorld.vue # 示例组件
│   ├── components/        # 可复用组件
│   │   └── HelloWorld.vue # 示例组件
│   ├── router/            # 路由配置
│   │   └── index.ts       # 路由定义
│   ├── stores/            # 状态管理
│   │   └── index.ts       # Pinia 状态库
│   ├── styles/            # 全局样式
│   │   └── main.scss      # 主样式文件
│   ├── views/             # 页面组件
│   │   ├── HomeView.vue   # 首页
│   │   └── AboutView.vue  # 关于页面
│   ├── App.vue            # 根组件
│   └── main.ts            # 应用入口
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── tsconfig.json          # TypeScript 配置
├── vite.config.ts         # Vite 配置
└── README.md              # 项目文档
```

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

访问 [http://localhost:3000](http://localhost:3000) 查看项目

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

### 运行测试

```bash
npm run test:unit
```

### 类型检查

```bash
npm run type-check
```

## 开发指南

### 组件开发

使用 Vue 3 Composition API 和 `<script setup>` 语法：

```vue
<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <button @click="handleClick">{{ buttonText }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Props 定义
interface Props {
  title: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
})

// 响应式数据
const count = ref(0)

// 计算属性
const buttonText = computed(() => 
  props.disabled ? '已禁用' : `点击次数: ${count.value}`
)

// 方法
const handleClick = () => {
  if (!props.disabled) {
    count.value++
  }
}
</script>

<style scoped lang="scss">
.my-component {
  padding: 1rem;
  border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-base);
}
</style>
```

### 状态管理

使用 Pinia 进行状态管理：

```typescript
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useMyStore = defineStore('myStore', () => {
  // 状态
  const items = ref<Item[]>([])
  
  // 计算属性
  const itemCount = computed(() => items.value.length)
  
  // 方法
  const addItem = (item: Item) => {
    items.value.push(item)
  }
  
  return {
    items: readonly(items),
    itemCount,
    addItem
  }
})
```

### 路由配置

在 `src/router/index.ts` 中配置路由：

```typescript
const routes: RouteRecordRaw[] = [
  {
    path: '/my-page',
    name: 'MyPage',
    component: () => import('../views/MyPageView.vue'),
    meta: {
      title: '我的页面'
    }
  }
]
```

### 样式规范

- 使用 SCSS 作为 CSS 预处理器
- 采用 CSS 变量定义主题色彩
- 使用 `scoped` 确保样式隔离
- 遵循 BEM 命名规范

## 部署指南

### 静态托管

构建后的文件可以部署到任何静态文件服务器：

```bash
npm run build
# 将 dist/ 目录部署到服务器
```

### Nginx 配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/your/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开 Pull Request

### 提交规范

使用 [Conventional Commits](https://conventionalcommits.org/) 规范：

- `feat`: 新功能
- `fix`: 修复bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 代码重构
- `test`: 测试相关
- `chore`: 构建过程或辅助工具的变动

## 常见问题

### Q: 如何添加新的页面？

A: 在 `src/views/` 目录下创建新的 Vue 组件，然后在 `src/router/index.ts` 中添加路由配置。

### Q: 如何自定义主题？

A: 修改 `src/styles/main.scss` 中的 CSS 变量，或者创建新的主题文件。

### Q: 如何集成第三方UI库？

A: 使用 npm 安装库，然后在 `src/main.ts` 中引入并注册。

## 许可证

[MIT License](LICENSE)

## 联系方式

- 邮箱: contact@example.com
- GitHub: [https://github.com/your-username/jz-ifame-father](https://github.com/your-username/jz-ifame-father)

---

⭐ 如果这个项目对你有帮助，请给个星标！