# vue3-pinia-vite-ts

**Repository Path**: gitee_store/vue3-pinia-vite-ts

## Basic Information

- **Project Name**: vue3-pinia-vite-ts
- **Description**: 基于Vue3的setup语法糖，采用TypeScript+组合式API编码。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-11
- **Last Updated**: 2025-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-pinia-vite-ts

该项目基于 Vite 和 Vue3 的 setup 语法糖，采用 TypeScript+组合式 API 编码。

## 学习来源

- 学习于
  ：<https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from=333.788.player.switch&vd_source=7152d744ecc75d82a35a3ceffd3c94ce&p=29>
- 当前学习位置：00:00

## 主要技术

- vue3
- vite
- pinia
- ts
- Element-Plus：v2.8.0（注意版本号，避免和 sass 版本有冲突）
- svg:
  [学习 svg 的视频，使用 figma 软件制作 svg 图标](https://www.bilibili.com/video/BV1CAW6eiExB?vd_source=7152d744ecc75d82a35a3ceffd3c94ce&spm_id_from=333.788.player.switch)

## 安装 IDE 和插件

- VSCode：[VSCode](https://code.visualstudio.com/)
- Volar：[Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (禁用 Vetur)(注意：Volar 插件已弃用，请
  安装 Vue-Official 插件代替，如果 Vue-Official 无法安装请更新 VSCode 的版本).

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

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for
type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the
TypeScript language service aware of `.vue` types.

## 环境

- node: v16.20.2 || 20.11.0

## 项目依赖安装

```sh
pnpm install
```

提交代码的依赖，全局安装：

```sh
npm install -g commitizen
```

### 启动项目（编译并热加载开发环境）

```sh
pnpm run dev
```

### 打包（类型检查, 为生产环境编译和压缩文件）

```sh
pnpm run build
```

### 自动部署

已经配置了 Gitee 的 webhook + Jenkins + Docker + Harbor + Nginx 的自动化部署，只需要打包，然后把打包好的 dist 目录一起提
推送到 Gitee 代码仓库，代码的推送会触发 Gitee 的 webhook，从而 webhook 触发 Jenkins 的 API，这样 Jenkins 就会自动进行部
署项目了。

### 查看依赖有哪些可用版本

如，查看 unplugin-icons 依赖有哪些可用版本：

```bash
pnpm view unplugin-icons versions
```

### 查看某个依赖的依赖链

如，查看 package-manager-detector 的依赖链：这将显示哪些包间接依赖了 package-manager-detector，帮助你更精准地定位问题。

```bash
pnpm why package-manager-detector
```

### 定位警告语句的所在文件

检测项目运行时出现警告语句的所在文件

```sh
# 语法：grep -r "关键警告信息" node_modules
grep -r "Cannot detect Vue version" node_modules
```

## 定制配置

See [Vite Configuration Reference](https://vitejs.dev/config/).