# vue3-components

**Repository Path**: nowodecuo/vue3-components

## Basic Information

- **Project Name**: vue3-components
- **Description**: Vue3可复用的组件，下载安装依赖后可直接运行
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-08-03
- **Last Updated**: 2024-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, vue3

## README

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

## 自用组件demo

### 1. 横向时间线组件demo

路径：/src/views/pageComponents/TimeLineDemo.vue

UI组件：naive ui

适用：PC端

### 2. 在线答题组件demo


路径：/src/views/pageComponents/ExamDemo.vue

UI组件：vant ui

适用：移动端

### 3. 动态表单组件demo


路径：/src/views/pageComponents/CustomForm.vue

UI组件：vant ui

适用：移动端

## 目录结构
```
|-public
|-src
    |-assets 资源目录
    |-common 公共目录
        |-components 组件            
        |-request 请求
        |-utils 工具方法
    |-constants 常量目录
        |-config 通用配置
        |-enums 枚举
    |-env   环境配置
    |-hooks   逻辑复用
    |-interface 接口对象(dto/vo)
        |-config 配置对象
    |-services 请求服务
    |-rpc 远程调用服务
    |-views 视图
        |-components 普通组件
        |-pageComponents 页面组件
```