# vue3-router-setup-pinia

**Repository Path**: Blair812/vue3-router-setup-pinia

## Basic Information

- **Project Name**: vue3-router-setup-pinia
- **Description**: vue3 组合模式 setup pinia 纯净版
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-14
- **Last Updated**: 2023-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, setup, Pinia

## README


### 项目架构目录
.
├── README.md
├── babel.config.js
├── components.d.ts
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── api
│   ├── assets
│   ├── components
│   ├── config
│   ├── directives
│   ├── httpHelper
│   ├── main.ts
│   ├── router
│   ├── shims-vue.d.ts
│   ├── store
│   ├── types
│   ├── utils
│   └── views
├── tsconfig.json
├── vue.config.js
└── yarn.lock


### 环境配置  

#### `nodejs` 版本
    nodejs 用^18.16.1版本  
    nodejs 版本切换工具推荐用 `n`  
##### `n` 的使用帮助
    sudo npm install -g n  

    [n命令参考文档](https://www.npmjs.com/package/n)

####  IDE配置
建议使用 `Visual Studio Code`开发`IDE`。  

安装扩展 `ESLint`、`Vue Language Feature(Language support for Vue 3)`、`Markdown Preview Github Styling`  

IDE空格设置为2个

### 项目安装

建议使用`yarn`安装

```
sudo npm install -g yarn
yarn install
```


### 项目启动

##### 开发环境
```
yarn serve
或
npm run serve
```
##### 测试环境
```
yarn test
或
npm run test
```

##### 上线环境  

```
yarn build
或
npm run build
```

#### 配置多个环境
    可以根据需要添加多个开发环境和测试环境。
    添加方式：
        1、在项目根目录创建文件 .env.dev`${n}`。配置内容参考.env.dev2
        2、在 package.json中的script里面添加"serve`${n}`": "vue-cli-service serve --mode dev`${n}`"即可。  

        注：n可以是数字也可以是字符串。
        

### `vue`相关配置
[vue配置参考文档](https://cli.vuejs.org/config/)

### 开源三方库  

时间格式化处理建议使用 `moment` 类库 [参考文档](http://momentjs.cn/)  

组件库使用 `vant4` [参考文档](https://vant-contrib.gitee.io/vant/#/zh-CN/)

### 项目使用技术体系  

##### `VUE3`的组合式 `API`、`TypeScript`、`Pinia`、`Scss`、`flex`、`Vant` `VueRouter`
组合式 API [参考文档](https://cn.vuejs.org/api/composition-api-setup.html)

`typescript` [参考文档](https://typescript.bootcss.com/)

`vue3` [参考文档](https://cn.vuejs.org/guide/introduction.html)

`VueRouter` [参考文档](https://router.vuejs.org/zh/guide/advanced/composition-api.html)

`pinia` [参考文档](https://pinia.vuejs.org/zh/core-concepts/)

`Scss` [参考文档](https://www.sass.hk/docs/)

`flex` [参考文档](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

`vant` [参考文档](https://vant-contrib.gitee.io/vant/#/zh-CN/)

### JS命名规范：  

 变量名、方法名用小驼峰命名`camel`。  
 例如：`myStudent`、`myCustomClass`

 类`class`、接口`interface`、枚举类型定义`enum` 用大驼峰命名。  
 例如：`MyClassName`  
##### 枚举
 `key`值用全大写，多词之间用`_`连接。  
 `value`不做限制。  
 例如：
``` js
enum MyEnum {
    MY_KEY: 'myKey'
}
```

#### TypeScript 使用说明   

关于 `type` `interface` `class` 分别具有自己的用途和特点。  
`type` 适用于定义类型别名、联合类型、交叉类型等，并且不需要运行时信息。
`interface` 主要用于定义对象的类型和形状，支持继承和实现。
`class` 既包含类型信息，也包含实际的属性和方法实现。在实际开发中，我们应根据需求选择合适的类型声明方式。  
`any` 类型尽量少用。

#### 物理存储规则
`storage` 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。  
`localStorage` 和 `sessionStroage` 使用的时候要注意其使用场景和时机。

#### 功能开发简述
    调用 api 流程分以下五步：  

    1、在 @src/api/allUrls.ts 中定义接口。具体参考现有方法。 
    
    注：
        <1>、url中已经按照模块进行了分类。添加新的code的时候需要在相应分类下添加。
        <2>、commonAPI是存放共用的接口。 若出现被调用频繁的api可以放在该分了下。
        <3>、若需添加新的code时，请确保allUrls.ts文件中没有相关接口。保持接口code唯一。
        <4>、请在定义方法名称的时候注意命名规范、取有意义的名称。并且，在allUrls、types、api、store中给同一个方法命名的时候尽量保持名称一致性。

    2、在@types/modules/api/对应模块下定义相对应接口的请求和响应的接口类型。

    3、在@src/api/xxx.ts 对应模块的ts中引入相关@/types和allUrls中对应的方法名称。
    具体使用方法参考@src/api/commonAPI.ts。

    4、在@store/modules/xxx.ts 中 defineStore 中定义方法调用相关接口。把相关的返回数据赋值给定义的响应式变量。
    具体参考@store/modules/Demo.ts

    5、在.vue文件中引入自己定义的store(eg: useDemoStore)。然后调用在defineStore中定义的方法。然后，就可以在.vue中访问对应的响应式数据了。

#### 布局

页面布局的时候，将设计图宽度调整为`750px`。
然后，按照设计图算出来的宽度和高度用px进行布局即可。
项目为自动将`px`转换为`rem`，实现自适应布局。

#### 布局方式  

主要使用`flex`布局。[flex布局参考文档](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)  
在 `@/assets/styles/common.scss` 文件中设置有常用的flex布局`class`，建议参考使用。

#### `vant` 组件库使用方式  

项目在打包的过程中，已经做了按需加载处理。
在`.vue` 文件的`<template>`中可以直接使用相关组件。不要再做组件和样式的引入！

### 数据存储  
项目中主要使用 `pinia` 进行数据状态管理。  
`store`之前的属性和方法可以相互引用。  
`store`可以处理一些数据层面的业务逻辑。  
注意要避免两个store中的同一个属性相互依赖引用，即避免死循环引用。

尽量少使用物理存储 `localStorage`、`sessionStorage`。

### localStorage、sessionStorage 使用方式

`localStorage` 在`@/types/modules/enum/enumLocalStorage.ts`中定义key值。
`sessionStorage` 在`@/types/modules/enum/enumSessionStorage.ts`中定义key值。

在使用的时引入对应的类型和存储方法。

``` js 使用示例

import { LocalStorageKeys, SessionStorageKeys } from '@/types'
import { localStorageInstance, sessionStorageInstance } from '@/utils/storage'

// localStorage
localStorageInstance.set(LocalStorageKeys.BLACK_BOX, 'myData')
const blackBox = localStorageInstance.get(LocalStorageKeys.BLACK_BOX)

// sessionStorage
sessionStorageInstance.set(SessionStorageKeys.SY_SC_TYPE, 'mySessionData')
const syScType = sessionStorageInstance.get(SessionStorageKeys.SY_SC_TYPE)

```