blackteay/vue3-vant4-mobile
1
0
Fork 0
mirror of https://github.com/xiangshu233/vue3-vant4-mobile.git synced 2025-04-06 03:57:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15 from wswmsword/main

Browse Source 
更新 mobile-forever 版本，优化 README 文档
This commit is contained in:
傲慢或香橙 2023-09-01 16:45:29 +08:00 committed by GitHub
commit 04c5b94d5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1071 additions and 995 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
README.md
View File

@ -17,31 +17,41 @@
## 介绍 ## 介绍
👋👋👋 Vue3 Vant4 Mobile 使用了最新的`Vue3.2`、`Vite3`、`Vant4`、`Pinia2`、`Typescript`、`Windicss`等主流技术开发，集成 `Dark Mode`(暗黑)模式和系统主题色，并且持久化保存，集成 `Mock` 数据，顺便写了个 登录/注册/找回密码 页面（包括逻辑），你只需要替换你的 API 即可，顺便写了个包含 `NavBar`、`TabBar`的 `Layout`，顺便集成了`Axios`、`useEcharts`、`IconSvg`，顺便集成了代码规范检查工具`Eslint`、`Prettier`、`Stylelint`。顺便全页面均可以 `keep-alive`，顺便......好吧没有了。现在，你可以在此之上直接开发你的业务代码！希望你能喜欢。🥳🥳🥳 👋👋👋 Vue3 Vant4 Mobile 使用了最新的 `Vue3.2`、`Vite3`、`Vant4`、`Pinia2`、`TypeScript`、`WindiCSS` 等主流技术开发，集成 `Dark Mode`（暗黑）模式和系统主题色，并且持久化保存，集成 `Mock` 数据，顺便写了个 登录/注册/找回密码 页面（包括逻辑），你只需要替换你的 API 即可，顺便写了个包含 `NavBar`、`TabBar` 的 Layout，顺便集成了 `Axios`、`useECharts`、`IconSvg`，顺便集成了代码规范检查工具 `Eslint`、`Prettier`、`Stylelint`。顺便全页面均可以 `<keep-alive>`，顺便......好吧没有了。现在，你可以在此之上直接开发你的业务代码！希望你能喜欢。🥳🥳🥳
## 截图预览 ## 截图预览
<p align="center"> <table>
<span> <tr>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022091917.png" width="400" /> <td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022091917.png" width="400" alt="登录页面" /></td>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092004.png" width="400" /> <td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092004.png" width="400" alt="主控台页(首页）" /></td>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092015.png" width="400" /> </tr>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092022.png" width="400" /> <tr>
</span> <td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092015.png" width="400" alt="消息页（图标页）" /></td>
</p> <td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092022.png" width="400" alt="我的（我的信息页面）" /></td>
</tr>
</table>
<p align="center">
<span> <details>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092052.png" width="400" /> <summary>展开预览暗黑模式下的界面截图。</summary>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092140.png" width="400" />
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092224.png" width="400" /> <table>
<img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221023152559.png" width="400" /> <tr>
</span> <td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092052.png" width="400" alt="登录页面（暗黑模式）" /></td>
</p> <td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092140.png" width="400" alt="主控台页（暗黑模式）" /></td>
</tr>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092224.png" width="400" alt="我的页面（暗黑模式）" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221023152559.png" width="400" alt="主题设置页面（暗黑模式）" /></td>
</tr>
</table>
</details>
## 线上预览 ## 线上预览
- <a href="https://vvmobile.xiangshu233.cn/" target="_blank">vue3-vant4-mobile</a> 预览链接：*[https://vvmobile.xiangshu233.cn/](https://vvmobile.xiangshu233.cn/)*
账号：admin，密码：123456 账号：admin，密码：123456
@ -61,13 +71,13 @@
- [Pinia](https://pinia.vuejs.org/) - 熟悉 `Pinia` 特性 - [Pinia](https://pinia.vuejs.org/) - 熟悉 `Pinia` 特性
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法 - [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法
- [Vue-Router-Next](https://router.vuejs.org/) - 熟悉 `Vue-Router`基本使用 - [Vue-Router-Next](https://router.vuejs.org/) - 熟悉 `Vue-Router`基本使用
- [Echarts5](https://echarts.apache.org/handbook/zh/get-started/) - 熟悉 `Echarts` 基本使用 - [ECharts5](https://echarts.apache.org/handbook/zh/get-started/) - 熟悉 `Echarts` 基本使用
- [Xicons](https://www.xicons.org/#/) - 本项目推荐图标库，当然你也可以使用 `IconSVg` - [xicons](https://www.xicons.org/#/) - 本项目推荐图标库，当然你也可以使用 `IconSVg`
- [Postcss-px-to-viewport-8-plugin](https://github.com/lkxian888/postcss-px-to-viewport-8-plugin) - 了解手机端 `px` 转 `viewport` 插件的作用 - [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - 了解手机端 `px` 转 `viewport` 插件的作用
- [Lodash-es](https://www.lodashjs.com/) - `JS`高性能工具库 - [Lodash-es](https://www.lodashjs.com/) - `JS`高性能工具库
- [WindiCss](https://cn.windicss.org/guide/) - 原子化 `CSS`，熟悉 `Windicss` 基本使用 - [WindiCSS](https://cn.windicss.org/guide/) - 原子化 `CSS`，熟悉 `WindiCSS` 基本使用
- [Mock.js](https://github.com/nuysoft/Mock) - 了解 `Mockjs` 基本语法 - [Mock.js](https://github.com/nuysoft/Mock) - 了解 `Mockjs` 基本语法
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 `ES6` 基本语法 - [ES6+](http://es6.ruanyifeng.com/) - 熟悉 `ES6` 基本语法
## 环境准备 ## 环境准备
@ -76,43 +86,32 @@
- 必须使用[pnpm7.x](https://www.pnpm.cn/)，否则依赖可能安装不上。 - 必须使用[pnpm7.x](https://www.pnpm.cn/)，否则依赖可能安装不上。
- [Node.js](http://nodejs.org/) 版本要求`12.x`以上，且不能为`13.x`版本，这里推荐 `15.x` 及以上。 - [Node.js](http://nodejs.org/) 版本要求`12.x`以上，且不能为`13.x`版本，这里推荐 `15.x` 及以上。
## Vscode 配套插件 ## VS Code 配套插件
如果你使用的 IDE 是[vscode](https://code.visualstudio.com/)(推荐)的话，可以安装以下工具来提高开发效率及代码格式化 如果你使用的 IDE 是 [VS Code](https://code.visualstudio.com/)（推荐）的话，可以安装以下工具来提高开发效率及代码格式化
- [windicss IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - windicss 提示插件 - [WindiCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - WindiCSS 提示插件
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - vue 开发必备 - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 开发必备
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css 格式化 - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env 文件 高亮 - [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - `.env` 文件 高亮
- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - 更好的错误定位 - [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - 更好的错误定位
## 使用 ## 使用
- 获取项目代码
```bash ```bash
# 获取项目代码
git clone https://github.com/xiangshu233/vue3-vant4-mobile.git git clone https://github.com/xiangshu233/vue3-vant4-mobile.git
```
- 安装依赖 # 安装依赖
```bash
cd vue3-vant4-mobile cd vue3-vant4-mobile
pnpm install pnpm install
```
- 运行 # 运行
```bash
pnpm dev pnpm dev
```
- 打包 # 打包
```bash
pnpm build pnpm build
``` ```

2
package.json
View File

@ -75,7 +75,7 @@
"postcss": "^8.4.16", "postcss": "^8.4.16",
"postcss-html": "^1.0.0", "postcss-html": "^1.0.0",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"postcss-mobile-forever": "^3.3.1", "postcss-mobile-forever": "^4.0.0",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.79.0", "rollup": "^2.79.0",

1970
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

7
postcss.config.js
View File

@ -14,9 +14,10 @@ const autoprefixer = require('autoprefixer');
const viewport = require('postcss-mobile-forever'); const viewport = require('postcss-mobile-forever');
const baseViewportOpts = { const baseViewportOpts = {
rootSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式 appSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式
viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度 viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度
unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除） unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）
maxDisplayWidth: 600, // 桌面端最大展示宽度
propList: [ propList: [
'*', '*',
// '!font-size' // '!font-size'
@ -29,10 +30,8 @@ const baseViewportOpts = {
valueBlackList: ['1px solid'], valueBlackList: ['1px solid'],
// exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
// include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换 // include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
border: true, // 为桌面端和横屏视图添加边框
disableDesktop: false, // 关闭桌面端适配
disableLandscape: false, // 关闭横屏适配
mobileUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw mobileUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
rootContainingBlockSelectorList: ["van-popup--bottom"], // 指定包含块是根包含块的选择器，这种选择器的定位通常是 `fixed`，但是选择器内没有 `position: fixed`
}; };
module.exports = { module.exports = {