Skip to content
This repository has been 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

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 运行脚本完成操作。

参考链接