Skip to content
This repository has been archived by the owner on Apr 20, 2022. It is now read-only.

MillCloud/boilerplate-uni-app-vue3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

boilerplate-uni-app-vue3

已经迁移到 MillCloud/presets

简介

boilerplate-uni-app-vue3 是一个面向中国用户的简单 uni-app (vue3) 模板,目标是帮助你快速开发小程序/移动端应用。当然,也希望能引导你更进一步地了解 uni-app (vue3) 生态。

如果你想要快速开发桌面端网页/移动端网页,请考虑使用 boilerplate-vue3

uni-app 并不是一个尽善尽美的方案,在很多细节上还有待提高。如果你只是想要开发移动端应用,也可以考虑使用 boilerplate-vue3,加入 cordovanative-scriptioniccapacitor

该模板只支持 vue 3。vue 2 支持请查看 boilerplate-uni-app-vue2

主要依赖

请先阅读上面的文档,并确保对 nodenpm基本了解

起步

这部分说明将让你得到能在本地运行的项目副本以开始开发。有关如何部署项目,请阅读 部署部分

准备

你可能需要使用梯子或手机 WiFi 完成准备步骤。

对于 macOS 用户,请按照以下指引操作。

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 设置镜像,加快下载速度
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node
# 安装 node@lts
nvm install --lts
# 使用 node@lts
nvm use --lts
# 设置默认版本
nvm alias default node
# 更新 npm
npm i -g npm --registry=https://registry.npmmirror.com
# 安装 homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 安装 git
brew install git
# 不自动转换换行符
git config --global core.autocrlf false
# 设置默认分支名为 main
git config --global init.defaultBranch main

设置 ~/.huskyrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

对于 Windows 用户,请按照以下指引操作。

首先安装 nvm-windowsGit

然后使用 Windows Terminal 作为终端,Git Bash 作为 Shell,参考 让 Win10 的终端更好用配置 Windows Terminal

如果你正在使用 ChocolateyScoop,你也可以通过命令安装,然后配置。

# 使用 Chocolatey
choco install nvm
choco install git

# 使用 Scoop
scoop install nvm
scoop install git

# 不自动转换换行符
git config --global core.autocrlf false
# 设置默认分支名为 main
git config --global init.defaultBranch main
# 设置镜像,加快下载速度
nvm node_mirror https://npmmirror.com/mirrors/node
nvm npm_mirror https://npmmirror.com/mirrors/npm
# 安装 node@lts
nvm install lts
# 使用 node@lts
nvm use lts
# 更新 npm
npm i -g npm --registry=https://registry.npmmirror.com

你可能需要配置 ~/.huskyrc

其它系统请根据以上指引自行调整。

另外,你还需要安装最新的 HBuilderX 正式版,用于申请一个 appid(DCloud 应用标识,也可以在 网页 上申请),以及把项目运行到真机或模拟器上。

安装与运行

# clone 项目到本地
git clone [email protected]:MillCloud/boilerplate-uni-app-vue3.git
# git clone [email protected]:MillCloud/boilerplate-uni-app-vue3.git
# 进入项目
cd boilerplate-uni-app-vue3
# 安装依赖
npm install --legacy-peer-deps

运行到支付宝小程序时,除运行 npm run dev:mp-alipay,还需要运行 npm run watch:mp-alipay 以保证样式正确。

使用

目录结构

.
├── .github                     # github 配置目录
├── .husky                      # husky 配置目录
├── public
├── scripts
│   ├── patch-mp-alipay.mts     # 运行到支付宝小程序时的 patch
│   ├── update-manifest.mts     # 配置 release-it 自动更新 manifest.json 的文件
├── src
│   ├── components              # 全局组件目录
│   ├── composables             # 全局组合式 API 目录
│   ├── constants               # 固定数据目录
│   ├── helpers                 # 辅助方法目录
│   ├── pages                   # 页面视图目录
│   ├── static                  # 资产目录
│   ├── stores                  # 状态仓库目录
│   ├── styles                  # 全局样式和全局变量目录
│   ├── App.vue
│   ├── global.d.ts
│   ├── main.ts
│   └── shims-vue.d.ts
├── .commitlintrc.cjs           # commitlint 配置文件
├── .editorconfig
├── .eslintrc.cjs               # eslint 配置文件
├── .gitignore                  # git 配置文件
├── .lintstagedrc.cjs           # lint-staged 配置文件
├── .markdownlint.json          # markdownlint 配置文件
├── .npmrc                      # npm 配置文件
├── .prettierrc.cjs             # prettier 配置文件
├── .release-it.cjs             # release-it 配置文件
├── .stylelintrc.cjs            # stylelint 配置文件
├── components.d.ts             # 组件定义文件
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── renovate.json               # renovate 配置文件
└── tailwind.config.cjs         # tailwindcss 配置文件
├── tsconfig.json               # typescript 配置文件
└── vite.config.ts              # vite 配置文件

VSCode 支持

你可以参考 插件settings.json

路由

uni-app 使用 pages.json 配置路由,请查看 文档

状态

使用 pinia 作为状态管理工具。

请求

使用 uni.request 作为底层请求,使用 vue-query 管理底层请求。

查看 @/helpers/request.ts 了解预设配置。

如果不喜欢 vue-query,也可以自行配置 swrv 使用。

测试

WIP

部署

  • 确认所有环境变量和模式相关的地方已经配置完成,参考 vite 文档 - 环境变量和模式vite-plugin-env-compatible
  • 运行 npm run release,更新版本号并上传 dist 目录下的内容。
  • 更多自定义可以参考 release-it 文档说明,使用 node 运行脚本完成操作。