uni-quick

KO | EN

gitlite — search

#python #react #typescript #golang #android #linux #nodejs #windows #cli #awesome-list #pytorch #mcp #ios #openai

(★ 9)

可以直接使用 px 单位的 uni-app 轻量开发模板 | uni-app lightweight development template that can directly use px

uni-quick 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# uniapp 轻量开发模板(Vue 3)

### 特性

- [x] 支持单位自动转换：
`.env` 文件中设置 `VITE_ENABLE_UNIT_CONVERSION` (是否开启转换，默认为 `true` )，`VITE_UI_SIZE` (设计稿尺寸，默认为 `375` )，`VITE_UNIT_PRECISION` (单位转换结果不为整数时的保留小数位，默认为 `2`)；使用 `UnoCSS` 和样式表设置元素尺寸大小时可直接使用设计稿中的 `px` 尺寸，编译后会自动转换为 `rpx` 尺寸(注意：内联样式暂时不支持转换)；如果在样式表中有部分情况不需要进行转换，可以设置并使用 `VITE_NO_CONVERSION_UNIT` (不转换的单位，默认为 `mpx` )；`UnoCSS` 扩展建议用 `0.61.6` 版本，配置 `rules` 后只有低版本才支持智能提示
- [x] 集成 `wot-design-uni` 组件库
- [x] 集成 `Pinia` 状态管理
- [x] 集成 `Alova.js` 请求工具集
- [x] 集成 `ESLint`、`StyleLint`、`EditorConfig` 代码格式规范
- [x] 集成 `UnoCSS`
- [x] 集成 `@iconify-json/mdi` 图标库，搭配 `UnoCSS` 使用
- [x] 集成 `z-paging` 组件
- [x] 集成 `vue-i18n` 国际化插件
- [x] 支持自动加载组件和 `API`
- [x] 添加页面跳转拦截，登录权限校验
- [x] 自动校验 `git` 提交信息格式，格式如 `feat: 新增功能`，提交类型可参考 `cz.config.js`

### 单位转换

> 源码中还是 px 尺寸，而编译产物中是 rpx 尺寸

**UnoCSS**
```
class="w-20 h-20"
// 编译后
width: 40rpx;
height: 40rpx;
```

**样式表**
```
.demo {
  width: 20px;
  height: 20mpx;
}
// 编译后
.demo {
  width: 40rpx;
  height: 20px;
}
```

### 目录结构

```
uni-quick
├ config                构建配置
│  ├ common
│  └ dev
├ env                   环境变量
├ scripts               脚本
│  └ verify-commit.js   git 提交检验
├ src
│  ├ api                接口管理
│  ├ components         公共组件
│  ├ hooks              常用 hooks 封装
│  ├ locale             国际化语言管理
│  ├ pages              页面管理
│  ├ plugins            插件管理
│  ├ router             路由管理
│  ├ static             静态资源
│  ├ store              状态管理
│  ├ utils              工具函数
│  ├ App.vue
│  ├ main.ts
│  ├ manifest.json      项目配置
│  ├ pages.json         页面配置
│  └ uni.scss           全局 scss 变量
├ types                 全局 typescript 类型文件
│  ├ auto-imports.d.ts
│  ├ components.d.ts
│  ├ env.d.ts
│  ├ global.d.ts
│  ├ i18n.d.ts
│  └ module.d.ts
├ cz.config.js          cz-git 配置
├ eslint.config.js      eslint 配置
├ index.html
├ package.json
├ pnpm-lock.yaml
├ stylelint.config.js   stylelint 配置
├ tsconfig.json         typescript 配置
├ uno.config.ts         unocss 配置
└ vite.config.ts        vite 配置
```

### 使用方法

```shell
# 安装依赖
pnpm install

# 启动微信小程序，开发环境
pnpm dev:mp-weixin
```

### 发布

```shell
# 启动微信小程序，生产环境
pnpm build:mp-weixin
```

### 代码提交

```shell
pnpm cz
```

### `v3` 代码块

在 `vue` 文件中，输入 `v3` 按 `tab` 即可快速生成页面模板

### 登录鉴权

1. 页面如果需要登录才能访问，只需在 `pages.json` 文件中需要鉴权的页面下设置 `needLogin` 属性设置为 `true` 即可，比如
```
{
  "pages": [
    {
      "path": "pages/test/index",
      "needLogin": true,
      "style": {
        "navigationBarTitleText": "",
      },
    }
  ]
}
```

uni-quick

uni-quick 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

uni-quick

uni-quick 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README