boilerplate-vue2 是一个面向中国用户的简单 vue 模板，目标是帮助你快速开发桌面端网页/移动端网页。当然，也希望能引导你更进一步地了解 vue 生态。
如果你想要快速开发移动端应用，请考虑加入 cordova、native-script、ionic 或 capacitor，或者使用 boilerplate-uni-app-vue2。
如果你想要快速开发桌面端应用，请考虑使用 electron 或 tauri。
2022-02-07 Vue 3 成为新的默认版本。Vue 3 模板请查看 boilerplate-vue3。
- vue2
- vite
- unplugin-icons
- unplugin-vue-components
- unplugin-vue2-script-setup
- vue-router
- pinia
- @vue/composition-api
- vue-use
- typescript
- vue2-helpers
- axios
- vue-query
- statuses
- tailwindcss - 支持了大部分 v2 类值、支持大部分类渐进增强、
0.5将会被替换成0_5、1/2将会被替换成1-2，但仍然不要使用高级特性，否则不能支持低端浏览器，具体可以到 caniuse 查询 - element-ui - 对于移动端网页，请考虑 vant
- iconify
- browser-update
- lodash
- ramda
- dayjs
- nprogress
- sass
- @modyqyw/fabric
- npm-check-updates
请先阅读上面的文档，并确保对 node 和 npm 有 基本了解。
这部分说明将让你得到能在本地运行的项目副本以开始开发。有关如何部署项目，请阅读 部署部分。
你可能需要使用梯子或手机 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
# 安装 pnpm
npm i -g pnpm --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-windows 和 Git。
然后使用 Windows Terminal 作为终端，Git Bash 作为 Shell，参考 让 Win10 的终端更好用 和 配置 Windows Terminal。
如果你正在使用 Chocolatey 或 Scoop，你也可以通过命令安装，然后配置。
# 使用 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
# 安装 pnpm
npm i -g pnpm --registry=https://registry.npmmirror.com
你可能需要配置 ~/.huskyrc。
其它系统请根据以上指引自行调整。
# clone 项目到本地
git clone [email protected]:MillCloud/boilerplate-vue2.git
# git clone [email protected]:MillCloud/boilerplate-vue2.git
# 进入项目
cd boilerplate-vue2
# 安装依赖
pnpm install
# 启动项目
pnpm run dev
.
├── .github # github 配置目录
├── .husky # husky 配置目录
├── public
├── src
│ ├── assets # 资产目录
│ ├── components # 全局组件目录
│ ├── composables # 全局组合式 API 目录
│ ├── constants # 固定数据目录
│ ├── layouts # 布局目录
│ ├── pages # 页面视图目录
│ ├── plugins # 插件目录
│ ├── router # 路由目录
│ ├── stores # 状态仓库目录
│ ├── styles # 全局样式和全局变量目录
│ ├── utils # 工具方法目录
│ ├── App.vue
│ ├── components.d.ts # 组件定义文件
│ ├── global.d.ts
│ ├── guard.ts # 导航守卫
│ ├── main.ts
│ ├── shims-jsx.d.ts
│ ├── shims-vue-query.d.ts
│ └── shims-vue.d.ts
├── .commitlintrc.cjs # commitlint 配置文件
├── .editorconfig
├── .env # 所有环境都载入的环境变量
├── .eslintrc.cjs # eslint 配置文件
├── .gitattributes # git 配置文件
├── .gitignore # git 配置文件
├── .lintstagedrc.cjs # lint-staged 配置文件
├── .markdownlint.json # markdownlint 配置文件
├── .npmrc # npm 配置文件
├── .postcssrc.cjs # postcss 配置文件
├── .prettierrc.cjs # prettier 配置文件
├── .release-it.cjs # release-it 配置文件
├── .stylelintrc.cjs # stylelint 配置文件
├── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md
├── renovate.json # renovate 配置文件
├── tailwind.config.cjs # tailwindcss 配置文件
├── tsconfig.json # typescript 配置文件
└── vite.config.ts # vite 配置文件你可以参考 插件 和 settings.json。
使用 vite-plugin-pages 和 vite-plugin-vue-layouts 实现约定式路由。
使用 pinia 作为状态管理工具。
使用 axios 作为底层请求，使用 vue-query 管理底层请求。
查看 @/utils/request.ts 了解预设配置。
如果不喜欢 vue-query，也可以自行配置 useFetch 或 useAxios 使用。
- 确认所有环境变量和模式相关的地方已经配置完成，参考 vite 文档 - 环境变量和模式 和 vite-plugin-env-compatible。
- 运行
pnpm run release，更新版本号并上传dist目录下的内容。 - 更多自定义可以参考
release-it文档说明，使用node运行脚本完成操作。