# base-vue3.2-ts

**Repository Path**: hhmxl/base-vue3.2-ts

## Basic Information

- **Project Name**: base-vue3.2-ts
- **Description**: vant4、vite、typescript
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-10-31
- **Last Updated**: 2022-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img alt="logo" src="https://freely.vercel.app/favicon.ico" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h1 align="center">手机端简易示例《随机热门音乐》</h1>

<p align="center">Vue 3 + Typescript + Vite + Vant + Pinia</p>

<p align="center">
🔥 <a target="_blank" href="https://freely.vercel.app/">Demo 访问</a>
&nbsp;
🌈 <a target="_blank" href="https://juejin.cn/post/7070402652948922381">文档</a>
</p>

---

## 依赖

- 🚀 vue3.2 + vite + typescript + pinia + axios + vant
- 💪 使用 vue3.2 `<script setup>` 语法糖
- 💪 使用 TypeScript
- 🍭 支持 jsx 组件写法
- 🍭 整合 vant ui、less
- 🍭 使用 viewport 移动端方案
- 🍭 使用 pinia 替代 vuex，更简单、更高效
- 🍭 使用 `网易云音乐` 热门歌曲接口为数据源

## 启动、部署

Using `yarn` to :

```bash
  # 安装依赖
  yarn

  # 本地启动
  yarn dev

  # 本地打包
  yarn build

```

## 增加 jest 单元测试

### jest 安装

1. 基本依赖

```shell
yarn add jest babel-jest @vue/vue3-jest @vue/test-utils -D
```

2. 兼容 typescript 需要安装如下

```shell
yarn add @types/jest ts-jest -D
```

3. 兼容全局 @ 别名导入

```js
// jest.conf.js增加如下
moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/src/$1'
}
```