# uniapp_vue3_vite_pinia

**Repository Path**: ganxb2/uniapp_vue3_vite_pinia

## Basic Information

- **Project Name**: uniapp_vue3_vite_pinia
- **Description**: uniapp_vue3_vite_pinia
- **Primary Language**: Unknown
- **License**: CC-BY-SA-4.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2023-03-28
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### uni-app(vue3+vite+typescript+pinia+uni-ui)微信小程序APP工程模版

![uni-app(vue3+vite+typescript+pinia+uni-ui)微信小程序APP工程模版](https://pic.rmb.bdstatic.com/bjh/a993f5432132a9833ec3e3d0c0586e118236.jpeg)

```
vue3-vite-uniapp
├─ .gitignore            //git忽略文件
├─ index.html            // 入口
├─ package.json            // 安装依赖配置
├─ pnpm-lock.yaml        // pnpm锁定配置
├─ README.md            // md说明
├─ src│
├─ App.vue            // 小程序页面状态
│ ├─ env.d.ts            // 环境变量
│ ├─ main.ts            // 入口js，导入了app.vue
│ ├─ manifest.json        // uniapp相关配置应用名称、appid、logo、版本等打包信息
│ ├─ api
│ │ └─ user.ts        // 用户页面使用接口
│ ├─ components
│ │ └─ counter
│ │ └─ counter.vue    // 测试pinia状态组件
│ ├─ config
│ │ └─ app.ts            // 封装接口使用的常量
│ ├─ pages
│ │ └─ index
│ │ └─ index.vue
│ ├─ static            // 静态资源
│ │ └─ logo.png
│ ├─ stores
│ │ └─ counter.ts        // 测试pinia状态
│ ├─ utils
│ │ ├─ request.d.ts    // 申明
│ │ └─ request.ts        // uni的请求方法封装
│ ├─ pages.json        // 小程序路由
│ ├─ shime-uni.d.ts    // ts申明 for vue
│ └─ uni.scss            // uni-app内置的常用样式变量
├─ .vscode
│ └─ settings.json    // 修改vscode本地设置
├─ types
│ └─ global.d.ts        // ts全局申明

├─ mock│ 
├─ controller        // 各种业务接口
│ │ ├─ user.ts        // 用户相关接口
│ │ └─ banner.ts        // banner图接口
│ ├─ middleware        // 前后端交互最重要的就是两个参数 request 和 respond ，每一个中间件执行完毕应该进入下一个中间件，因此还需要一个 next 参数，用来启动下一个中间件。
│ │ └─ resultHandler.ts// 用来给每个响应对象包装响应码等
│ ├─ mockdb            // 各种假数据
│ ├─ utils                // 小工具
│ │ └─ logger.ts        // 错误日志
│ ├─ constant.ts        // 常量
│ ├─ mock.ts            // 主入口
│ ├─ requestDecorator.ts// 生成 http method 装饰器，创建类路径装饰器
│ ├─ router.ts            // 路由（更具体做啥？）
│ ├─ tsconfig.json        // ts配置
│ └─ type.d.ts            // ts申明
├─ .eslintrc.js            // eslint的配置
├─ .prettierrc.js        // prettier的配置
├─ tsconfig.json        // ts的配置
└─ vite.config.ts        // vite配置

```

搭建步骤参考小波博客 https://blog.ganxb2.com/3462.html



### 😦目标功能

#### done:

1. 集成 vue3、typescript、pinia、vite、uni-ui、nodejs-koa、pnpm，使用 vue3 模版渲染思路开发
2. 多人协作 eslint、prettier 代码格式校验规范， vsocde 配置
3. jest 单元测试
4. pinia 全局状态管理
5. 小程序分包配置
6. 小程序自定义顶部导航
6. nodejs-koa 接口服务
6. 多环境 api 接口判断
7. 页面eg：首页、点餐

#### todo:

- git提交 husky 校验
- git提交 commit 校验
- ~~改成 tsx 完善整个系统流程~~(uni要兼容小程序则无法使用tsx写法)
- 生产环境去除 console
- nodejs-koa 提取到vercel做成在线 api 服务
- 打包 app 流程(✔安卓已完成)
- vite 深入使用实践

<br>

### 🧐主要技术栈

- vue3
- typescript
- uni-ui
- pinia
- vite
- pnpm
- koa
- nodejs
- sass
- jest
- eslint+prettier
- husky 
- commit 





### 图片预览插件

### previewImage https://ext.dcloud.net.cn/plugin?id=1417

 

```js
const dcRichAlert = uni.requireNativePlugin('Jing-previewImage')
var pathName = plus.io.convertLocalFileSystemURL(url);
dcRichAlert.show({
    "isTransparent":true,
    "CanScale":true, 
    "CanRotate":true, 
    "MaxScale":3,     
    "pathName": [pathName,pathName ] //必须是数组
});

参数说明：
//url可以是chooseImage后返回的路径
//url也可是saveFile后返回的路径
//url也可是项目根目录写法，如：/static/xxx.png
//isTransparent背景是否透明，默认为false
//CanScale是否可以缩放，默认为false
//CanRotate是否可以旋转，默认为false
//MaxScale可以缩放的最大倍数，默认为2
//pathName内存卡的绝对路径
```



### 适用于微信小程序的图片预览组件 

**gyc-previewimages** https://ext.dcloud.net.cn/plugin?id=15718

```html
<template>
    <view>
        <image class="cover" v-for="(item,idx) in imgsList" :key="idx" :src="item" @click="handlerImgs(idx)"></image>
        <!-- 引入组件 -->
        <gyc-previewimages ref="imgs"></gyc-previewimages>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 图片列表，自行填入地址
                imgsList: [
                    "https://iph.href.lu/500x500",
                    "https://iph.href.lu/500x1800?fg=666666&bg=cccccc"
                ]
            }
        },
        methods: {
            /**
             * 预览图片
             * @param {Object} idx 图片索引
             */
            handlerImgs(idx) {
                // 调用组件内previewImages方法
                // 该方法传入current参数（当前展示的图片的索引），urls参数（当前展示的图片列表，格式参考imgsList）
                this.$refs.imgs.previewImages({
                    current: idx,
                    urls: this.imgsList
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .cover {
        width: 300rpx;
        height: 300rpx;
    }
</style>
```