# community

**Repository Path**: wangmaba/community

## Basic Information

- **Project Name**: community
- **Description**: 创新三维社区项目仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-23
- **Last Updated**: 2025-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + TypeScript + Tailwind + Sass 开发模板

一个现代化的 Vue3 开发模板，集成了 TypeScript、Tailwind CSS、Sass 和布局系统。

## ✨ 特性

- 🚀 **Vue 3** - 最新的 Vue 框架
- 📘 **TypeScript** - 类型安全的 JavaScript
- 🎨 **Tailwind CSS** - 实用优先的 CSS 框架
- 💎 **Sass** - CSS 预处理器
- 🏗️ **布局系统** - 基于路由的布局管理
- 📱 **响应式设计** - 移动端友好
- ⚡ **Vite** - 快速的构建工具

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 开发服务器

```bash
npm run dev

高版本node npm install --legacy-peer-deps
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 📁 项目结构

```
src/
├── components/          # 组件
│   ├── RouteNavbar.vue  # 导航栏组件
│   ├── Items.vue        # 示例组件
│   └── Store.vue        # 状态管理组件
├── layouts/             # 布局组件
│   ├── DefaultLayout.vue # 默认布局（带导航栏）
│   └── BlankLayout.vue   # 空白布局（无导航栏）
├── views/               # 页面组件
│   ├── Home.vue         # 首页
│   ├── Store.vue        # 状态管理页面
│   ├── About.vue        # 关于页面
│   └── 404.vue          # 404页面
├── router/              # 路由配置
│   └── route.ts         # 路由定义
├── store/               # 状态管理
│   └── store.ts         # Pinia store
├── styles/              # 样式文件
│   ├── main.scss        # 主样式文件
│   ├── _variables.scss  # Sass变量
│   ├── _mixins.scss     # Sass混入
│   └── _base.scss       # 基础样式
└── assets/              # 静态资源
```

## 🎨 样式系统

### Sass 变量

```scss
// 主题色
$primary-color: #3b82f6;
$secondary-color: #8b5cf6;

// 背景色
$primary-bg-color: #F8F8F8;
$secondary-bg-color: #ffffff;

// 文本色
$primary-text-color: #1f2937;
$secondary-text-color: #222;
```

### 响应式断点

```scss
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
```

## 🏗️ 布局系统

### 添加新页面

1. **创建页面组件**

```vue
<!-- src/views/NewPage.vue -->
<template>
  <div class="new-page">
    <h1>新页面</h1>
  </div>
</template>
```

2. **配置路由**

```typescript
// src/router/route.ts
{
  path: '/new-page',
  name: 'NewPage',
  meta: { 
    title: '新页面',
    showInNav: true,
    icon: 'new'
  },
  component: () => import('../layouts/DefaultLayout.vue'),
  children: [
    {
      path: '',
      name: 'NewPageContent',
      component: () => import('../views/NewPage.vue')
    }
  ]
}
```

### 布局类型

- **DefaultLayout** - 带导航栏的布局
- **BlankLayout** - 无导航栏的布局

## 🛠️ 开发工具

### 推荐 IDE

- [VSCode](https://code.visualstudio.com/)
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

### 浏览器支持

- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+

## 📝 开发指南

### 使用 Sass

```vue
<style lang="scss" scoped>
@use '../styles/variables' as *;
@use '../styles/mixins' as *;

.my-component {
  color: $primary-color;
  padding: $spacing-md;
  
  @include respond-to(md) {
    padding: $spacing-lg;
  }
}
</style>
```

### 使用 Tailwind CSS

```vue
<template>
  <div class="bg-white p-4 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800">标题</h1>
  </div>
</template>
```

### 状态管理

```typescript
// src/store/store.ts
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})
```

## 🚀 部署

### 构建

```bash
npm run build
```

### 预览

```bash
npm run preview
```

构建后的文件在 `dist` 目录中，可以直接部署到任何静态文件服务器。

## 📄 许可证

MIT License