Skip to content
This repository was archived by the owner on Mar 14, 2022. It is now read-only.

MillCloud/boilerplate-uni-app-vue2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bbca45b · Mar 14, 2022
Dec 5, 2021
Aug 4, 2021
Dec 14, 2020
Feb 25, 2022
Sep 1, 2021
Feb 9, 2022
May 15, 2021
Apr 4, 2021
Apr 4, 2021
Mar 14, 2022
Jan 19, 2021
Dec 31, 2021
Dec 31, 2021
Jul 28, 2021
Feb 15, 2022
Feb 9, 2022
Feb 15, 2022
Feb 9, 2022
Mar 14, 2022
Sep 16, 2021
Sep 9, 2021
Mar 14, 2022
Mar 14, 2022
Oct 2, 2021
Sep 21, 2021
Dec 17, 2021
Dec 17, 2021
Feb 9, 2022
Oct 2, 2021
Feb 14, 2022

Repository files navigation

boilerplate-uni-app-vue2

简介

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

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

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

2022-02-07 Vue 3 成为新的默认版本。Vue 3 模板请查看 boilerplate-uni-app-vue3

主要依赖

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

起步

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

准备

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

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

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/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
# 安装 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

你可能需要配置 ~/.huskyrc

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

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

安装和运行

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

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

使用

目录结构

.
├── .github                     # github 配置目录
├── .husky                      # husky 配置目录
├── public
├── src
│   ├── components              # 全局组件目录
│   ├── composables             # 全局组合式 API 目录
│   ├── constants               # 固定数据目录
│   ├── pages                   # 页面视图目录
│   ├── plugins                 # 插件目录
│   ├── static                  # 资产目录
│   ├── stores                  # 状态仓库目录
│   ├── styles                  # 全局样式和全局变量目录
│   ├── utils                   # 工具方法目录
│   ├── androidPrivacy.json     # Android 隐私政策配置
│   ├── App.vue
│   ├── global.d.ts
│   ├── main.ts
│   ├── manifest.json           # 信息配置文件
│   ├── pages.json              # 页面配置文件
│   ├── shims-jsx.d.ts
│   ├── shims-luch-request.d.ts
│   └── shims-vue.d.ts
├── unpackage                   # 打包时使用的资产文件夹
├── .browserslistrc             # 浏览器支持列表文件
├── .commitlintrc.js            # commitlint 配置文件
├── .editorconfig
├── .env.development            # development 载入的环境变量
├── .env.production             # production 载入的环境变量
├── .eslintrc.js                # eslint 配置文件
├── .gitattributes              # git 配置文件
├── .gitignore                  # git 配置文件
├── .lintstagedrc.js            # lint-staged 配置文件
├── .markdownlint.json          # markdownlint 配置文件
├── .npmrc                      # npm 配置文件
├── .prettierrc.js              # prettier 配置文件
├── .release-it.js              # release-it 配置文件
├── .stylelintrc.js             # stylelint 配置文件
├── babel.config.js             # babel 配置文件
├── package.json
├── package-lock.json
├── postcss.config.js           # postcss 配置文件
├── patch-mp-alipay.js          # 运行到支付宝小程序时的 patch
├── README.md
├── tailwind.config.js          # tailwindcss 配置文件
├── tsconfig.json               # typescript 配置文件
├── update-manifest.js          # 配置 release-it 自动更新 manifest.json 的文件
└── vue.config.js               # vue-cli 配置文件

VSCode 支持

你可以参考 插件settings.json

路由

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

状态

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

请求

使用 luch-request 请求。

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

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

应用信息配置

uni-app 使用 manifest.json 配置应用信息,请查看 文档

页面信息配置

uni-app 使用 pages.json 配置页面信息,请查看 文档

默认启用了 easycom,支持 uni-uiuview-ui

部署

  • 确认所有模式和环境变量相关的地方已经配置完成,参考 vue-cli 文档 - 模式和环境变量
  • 运行 npm run release,更新版本号。
  • 对于小程序,运行对应的命令构建,然后用开发者工具上传 dist 目录下对应平台的内容。
  • 对于移动端应用,用 HBuilderX 云打包或本地安心打包获取安装包自行处理。
  • 更多自定义可以参考 release-it 文档说明,使用 node 运行脚本完成操作。

参考链接