# vite-v3-ts-pinia

**Repository Path**: frontend-qin/vite-v3-ts-pinia

## Basic Information

- **Project Name**: vite-v3-ts-pinia
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-21
- **Last Updated**: 2022-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Ts + Vite + Pinia

## 模板说明

```bash
集成了 vite + v3 + 路由 + pinia + axios + sass
路由支持自定义， 或者自动生成

本项目 未 集成进任何UI， twindcss 等工具，需要您手动自己使用添加

```

### 检查依赖的版本更新

<a href="https://github.com/tjunnone/npm-check-updates" target="_blank">ncu 文档</a>

- 更新后有可能报错 【个别升级的插件 可能 api 的调用方式不一样了】

```bash
# install global
npm i -g npm-check-updates
# use
ncu
# update package
ncu -u
# 重新安装依赖
npn i
```

### .env 文件说明

<a href="https://vitejs.cn/guide/env-and-mode.html#env-files"> .env 文件</a>

- 1. 配置一些公共全局常量，如：公共接口地址，标题，公共链接... 等;
- 2. 只有 `VITE_`开头的常量 ，才会被暴露为 `import.meta.env` 提供给客户端源码, 如：VITE_BASE_URL=我是开发地址
- 3. 调用 `import.meta.env` 获取配置的常量值
- 4. 在 `man.ts` 文件中打印 `console.log(import.meta.env)`，信息如下

```javascript
import.meta.env = {
  BASE_URL: "/";
  DEV: true;
  MODE: "test";
  PROD: false;
  VITE_BASE_URL: "我是开发地址";
}
```

### 创建不同环境的 .env 文件

```bash
# 配置本地环境的一些变量
.env.development

# 配置测试环境中的一些变量
.env.test

# 配置生产环境中的一些变量
.env.production
```

### 启动打包脚本

<a href="https://vitejs.cn/guide/env-and-mode.html#modes">环境变量与模式</a>

- 以下使用 `yarn` 包管理器, 您也可以使用 `npm` , `pnpm` 等

```bash
#本地启动-开发环境接口地址
yarn dev
#本地启动-测试环境接口地址
yarn dev:test
#本地启动-生产环境接口地址
yarn dev:prod

#打包环境-本地开发接口地址
yarn build
#打包环境-测试环境接口地址
yarn build:test
#打包环境-生产环境接口地址
yarn build:prod
```

### 目录结构

### 自动生成路由规则

<a href="https://github.com/hannoeru/vite-plugin-pages" target="_blank">vite-plugin-pages</a>

```bash
src/
  ├── features/
  │  └── dashboard/
  │     ├── code/
  │     ├── components/
  │     └── pages/
  ├── admin/
  │   ├── code/
  │   ├── components/
  │   └── pages/
  └── pages/
```

```js
// vite.config.js
export default {
  plugins: [
    Pages({
      dirs: [
        { dir: 'src/pages', baseRoute: '' },
        { dir: 'src/features/**/pages', baseRoute: 'features' },
        { dir: 'src/admin/pages', baseRoute: 'admin' },
      ],
    }),
  ],
}
```

### svg 使用

- 将 svg 文件放入 `assets/svg`目录下

```vue
# name 为 .svg 的前缀名字
<template>
  <svg-icon name="github" />
</template>
```

### HooKs 函数

<a href="https://vueuse.org/" target="_blank">vueuse 文档</a>

### 插件

<a href="https://github.com/MikeMcl/decimal.js" target="_blank">decimal-js， 数字计算，小数精度丢失问题解决</a>

```javascript
// npm install decimal.js
import { Decimal } from 'decimal.js'

// 先创建对象
const num = new Decimal(123.4567)

// 调用：num.方法名
num.toFixed(5) //'123.45670' 保留5位小数
```

<a href="http://panjiachen.github.io/countTo/demo/" target="_blank">vue 数字动画组件</a>

```bash
# 安装
npm install vue3-count-to
```

```vue
<template>
  <countTo :startVal="0" :endVal="endVal" :duration="3000" />
</template>
<script setup>
  import CountTo from 'vue3-count-to'
</script>
```

<a href="https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md" target="_blank">vue-echarts: 对 echarts 的二次封装</a>

```vue
# 参考文档
```

<a href="https://github.com/necolas/normalize.css/" target="_blank">normalize.css: css 重置</a>

```bash
# 安装
yarn add normalize.css

# 使用
import 'normalize.css'
```

<a href="https://pinia.vuejs.org/getting-started.html" target="_blank">pinia: 功能同 vuex</a>

```vue
# 参考文档
```

<a href="https://vue3-infinite-loading.netlify.app/docs/installation/" target="_blank">vue3-infinite-loading：（pc 端）滚动加载下一页数据</a>

```vue
# 参考文档
```

<a href="https://animate.style/" target="_blank">css 动画库</a>

```vue
<!-- 使用参考，将你要动画的东西 添加到 【transition组件】 里边， 动态 控制它的 隐藏 和 显示 -->
<!-- animate__backInLeft 可以替换为你赋值的 动画的名字 -->
<!-- animation-duration 控制动画时长 -->
<transition
  appear
  enter-active-class="animated animate__backInLeft"
  leave-active-class="animated animate__backInRight"
>
  <div style="animation-duration: 2000ms" v-show="show">
    模块动画
  </div>
</transition>
```

#### 项目目录

```bash
├── .vscode
├── config                        # vite 脚手架配置
├── node_modules                   # 项目开发依赖 【第三方包，插件】
├── public
│   └── favicon.ico
├── src                           # 源码
│   ├── api                       # 接口封装函数
│   ├── assets                    # 静态资源 【css, font , svg....】
│   ├── components                # 全局公共组件 【组件名/index.vue】
│   ├── hooks                     # 方法
│   ├── layout                    # 布局文件 []
│   ├── pages                     # 路由对应页面
│   ├── plugins                   # 注册插件
│   ├── router                    # 创建路由
│   ├── store                     # 数据仓库 【pinia】
│   ├── styles                    # 全局css , 皮肤 scss变量
│   ├── types                     # 数据类型定义
│   ├── utils                     # 全局公共方法【工具类】
│   ├── App.vue                    # 根组件
│   ├── component.d.ts             # 自动配置生成的
│   ├── env.d.ts                   # 忽略ts 包报错问题
│   ├── main.ts                    # 入口文件
│   └── vite.d.ts                     # 忽略 vite Api ts 包报错问题
├── .env.development               # 配置开发接口
├── .env.production                # 配置正式接口
├── .env.test                      # 配置测试服务接口
├── .eslintignore                   # eslint[代码格式统一风格]
├── .eslintrc.js                    # eslint[代码格式统一风格]
├── .gitignore                      # git上传代码忽略的文件
├── .prettierignore                 # 配置测试服务接口
├── .prettierrc.js                 # 配置测试服务接口
├── 项目说明.md                     # 项目说明
├── index.html
├── package-lock.json               # 锁定依赖版本
├── package.json                    # 项目脚本
├── tsconfig.json                   # 配置ts
├── tsconfig.json                   # 配置ts
└── yarn.lock
```