From da8c75fceb4b5ff0b6d819a899d9a15e5ccc9a96 Mon Sep 17 00:00:00 2001 From: wswmsword Date: Sun, 27 Aug 2023 09:53:40 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 87 +++++++++++++++++++++++++++---------------------------- 1 file changed, 43 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index be2f393..41b3b6f 100644 --- a/README.md +++ b/README.md @@ -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`。顺便全页面均可以 ``，顺便......好吧没有了。现在，你可以在此之上直接开发你的业务代码！希望你能喜欢。🥳🥳🥳 ## 截图预览 -

- - - - - - -

+ + + + + + + + + +
登录页面主控台页(首页）
消息页（图标页）我的（我的信息页面）
-

- - - - - - -

+ +
+展开预览暗黑模式下的界面截图。 + + + + + + + + + + +
登录页面（暗黑模式）主控台页（暗黑模式）
我的页面（暗黑模式）主题设置页面（暗黑模式）
+ +
## 线上预览 -- vue3-vant4-mobile +预览链接：*[https://vvmobile.xiangshu233.cn/](https://vvmobile.xiangshu233.cn/)* 账号：admin，密码：123456 @@ -61,13 +71,13 @@ - [Pinia](https://pinia.vuejs.org/) - 熟悉 `Pinia` 特性 - [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法 - [Vue-Router-Next](https://router.vuejs.org/) - 熟悉 `Vue-Router`基本使用 -- [Echarts5](https://echarts.apache.org/handbook/zh/get-started/) - 熟悉 `Echarts` 基本使用 -- [Xicons](https://www.xicons.org/#/) - 本项目推荐图标库，当然你也可以使用 `IconSVg` -- [Postcss-px-to-viewport-8-plugin](https://github.com/lkxian888/postcss-px-to-viewport-8-plugin) - 了解手机端 `px` 转 `viewport` 插件的作用 +- [ECharts5](https://echarts.apache.org/handbook/zh/get-started/) - 熟悉 `Echarts` 基本使用 +- [xicons](https://www.xicons.org/#/) - 本项目推荐图标库，当然你也可以使用 `IconSVg` +- [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - 了解手机端 `px` 转 `viewport` 插件的作用 - [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` 基本语法 -- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 `ES6` 基本语法 +- [ES6+](http://es6.ruanyifeng.com/) - 熟悉 `ES6` 基本语法 ## 环境准备 @@ -76,43 +86,32 @@ - 必须使用[pnpm7.x](https://www.pnpm.cn/)，否则依赖可能安装不上。 - [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 提示插件 -- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - vue 开发必备 +- [WindiCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - WindiCSS 提示插件 +- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 开发必备 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化 -- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css 格式化 -- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env 文件 高亮 +- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化 +- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - `.env` 文件 高亮 - [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - 更好的错误定位 ## 使用 -- 获取项目代码 - ```bash +# 获取项目代码 git clone https://github.com/xiangshu233/vue3-vant4-mobile.git -``` -- 安装依赖 - -```bash +# 安装依赖 cd vue3-vant4-mobile - pnpm install -``` -- 运行 - -```bash +# 运行 pnpm dev -``` -- 打包 - -```bash +# 打包 pnpm build ```