# vite-vue3-starter

**Repository Path**: zhangminAaron/vite-vue3-starter

## Basic Information

- **Project Name**: vite-vue3-starter
- **Description**: 项目基于element-plus,typescript,vue3.0,vite,tsx实现的 vue3 系统架构。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-22
- **Last Updated**: 2022-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Typescript + Vite

该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。

## 规范目录结构

```text
├── publish/
└── src/
    ├── assets/                    // 静态资源目录
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── style/                     // 通用 CSS 目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json
```

## 推荐的IDE设置

[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur).
确保在设置中启用`vetur.experimental.templateInterpolationService`！

### 如果使用 `<script setup>`

[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) 是当前处于RFC阶段的功能。为语法获得适当的IDE支持,
使用[Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) 而不是Vetur（并禁用Vetur）。

## TS中对`.vue`导入的类型支持

由于TypeScript无法处理`.vue`导入的类型信息，因此默认情况下将它们填充为通用Vue组件类型。在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。但是，如果您希望在`.vue`
导入中获取实际的道具类型（例如，在使用手动`h（...）`调用时获得道具验证），则可以使用以下命令：

### 如果使用 Volar

Run `Volar: Switch TS Plugin on/off` 从VSCode命令面板。

### 如果使用 Vetur

1. 在`tsconfig.json`中安装`@vuedx/typescript-plugin-vue`并将其添加到[plugins section]（https：www.typescriptlang.orgtsconfigplugins）
2. 删除`srcshims-vue.d.ts`，因为不再需要向Typescript提供模块信息
3. 在VSCode中打开`srcmain.ts`
4. 打开VSCode命令面板
5. 搜索并运行 `Select TypeScript version` -> `Use workspace version`