# uni-mobile

**Repository Path**: mecol/uni-mobile

## Basic Information

- **Project Name**: uni-mobile
- **Description**: z-paging测试库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-16
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp-vue3-ts-scaffold

#### 一、介绍

本项目是一个基于uni-app + Vue3 + Typescript + Pinia + Vite + uv-ui脚手架开发的项目。

#### 二、技术栈简介

##### 2.1 uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app官方文档：[https://uniapp.dcloud.net.cn/](https://uniapp.dcloud.net.cn/)

##### 2.2 vue3

Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。Vue 3与Vue 2的主要区别包括：

- 构建：Vue 3使用monorepo架构，更容易管理和维护。
- API：Vue 3引入了新的组合式API，它提供了更灵活的代码组织方式。
- 性能：Vue 3提供了更好的性能，包括更快的渲染速度和更小的打包大小。
- TypeScript：Vue 3提供了更好的TypeScript支持。

Vue3官方文档：[https://cn.vuejs.org/](https://cn.vuejs.org/)

##### 2.3 TypeScript

TypeScript是由 Microsoft 开发并维护的开源编程语言，它是在 JavaScript的基础上增加了静态类型、类和接口等特性，从而将其提升为一个功能更为丰富的开发平台。TypeScript 通过编译器将 TypeScript 代码转换为 JavaScript 代码，确保这些代码能够在支持 JavaScript 的各种设备和平台上运行。这种设计允许开发者利用 TypeScript 的静态类型检查以及类、接口和其他 OOP 功能来构建大型、复杂的 Web 应用，同时享受 JavaScript 本身的高灵活性和易于使用的特点。

Typescript官网文档：[https://www.typescriptlang.org/](https://www.typescriptlang.org/)

##### 2.4 Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

- dev-tools 支持
   - 跟踪动作、突变的时间线
   - Store 出现在使用它们的组件中
   - time travel 和 更容易的调试
- 热模块更换
   - 在不重新加载页面的情况下修改您的 Store
   - 在开发时保持任何现有状态
- 插件：使用插件扩展 Pinia 功能
- 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
- 服务器端渲染支持

Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。

Pinia官方文档：[https://pinia.web3doc.top/](https://pinia.web3doc.top/)


##### 2.5 uv-ui

说到uv-ui，就不得不先从uni-ui和uView说起。uni-ui、uView和uv-ui都是uni-app生态下专用的组件库。

- uni-ui 是DCloud官方提供的跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

    但此组件库组件相对较少，设计风格略显滞后，笔者本人并不是很喜欢。
    
    uni-ui官方文档：[https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)

- uView从2018年初发布以来，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。uView2.0，全面兼容了uni-app生态下的nvue开发模式，对1.x进行了架构重构，细节和性能都有极大提升。

    但uView是基于vue2实现，在vue3框架下使用会存在诸多问题。

    uView官方文档：[https://uviewui.com/](https://uviewui.com/)

- uv-ui是兼容vue3+2、nvue、app、h5、多端小程序的uni-app生态框架，大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。
    
    uv-ui官方文档：[https://www.uvui.cn/](https://www.uvui.cn/)


结合本项目的实际情况，笔者最终选择uv-ui作为项目的ui库。

##### 2.6 vite

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。Vue3默认使用Vite作为项目脚手架工具。

Vite官方文档：[https://vitejs.cn/](https://vitejs.cn/)

#### 三、其他

##### 3.1 扩展uni-icon的图标库：
- 找到uni_modules/uni-icons/components/uni-icons/uniicons.ttf文件，使用[ttf在线编辑网站](https://font.qqe2.com/index.html)，在线打开ttf，导入要添加的svg格式的icon，选中导入的icon，设置代码点（注意要取消是否生成字形名称的选项），然后导出TTF，覆盖原本的uniicons.ttf文件。
- uniicons.css文件，底部添加 
```css
.uniui-shouji:before {
	content: "\e002";//添加的代码点
}
```
- uniicons_file.ts添加
```json
{
	font_class: 'shouji',
	unicode: '\ue002'
}
```
- uniicons_file_vue.js添加
```json
{
	"font_class": "shouji",
	"unicode": "\ue002"
}
```
- 使用：
```html
<uni-icons type="shouji" size="25" />
```