diff --git a/README.md b/README.md index 5901fba..8366be8 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,100 @@ -# 智念移动端单页应用Vue3模板 +# 智念移动端单页应用 Vue3 模板 -# 安装依赖 +## 项目简介 +智念移动端单页应用（SPA）Vue3 模板，基于 Vite 构建，集成了 Vant 4 移动端 UI 组件库、Vue Router 4 以及自定义状态管理方案。该模板内置了移动端自适应、数据加密通信、自动化按需引入等核心功能，提供开箱即用的移动端 H5 开发体验。 -Yarn 安装 +## 核心技术栈 +- **框架**: [Vue 3](https://v3.vuejs.org/) (Composition API) +- **构建工具**: [Vite](https://vitejs.dev/) (v3) +- **路由**: [Vue Router](https://next.router.vuejs.org/) (v4) +- **UI 组件库**: [Vant](https://vant-contrib.gitee.io/vant/v4/) (v4) +- **网络请求**: [Axios](https://axios-http.com/) (自定义封装，支持 RSA/AES 加解密及验签机制) +- **CSS 预处理器**: SCSS + PostCSS +- **代码规范**: ESLint + Prettier + Husky + Commitlint +## 目录结构 +```text +webapp-vue-frontend +├── public/ # 静态资源，不经过构建打包 +├── src/ +│ ├── assets/ # 静态资源 (SCSS 样式、字体等) +│ ├── common/ # 公共 JS 方法 (自适应 flexible、网络请求 ajax 等) +│ ├── components/ # 全局公共组件 +│ ├── hooks/ # Vue3 Composition API hooks +│ ├── router/ # 路由配置 +│ ├── store/ # 状态管理中心 (基于 Vue3 reactive 自定义实现) +│ ├── views/ # 页面视图组件 +│ ├── App.vue # 根组件 +│ └── main.js # 项目入口文件 +├── .env.* # 多环境变量配置文件 (development/staging/production) +├── vite.config.js # Vite 构建配置文件 +└── package.json # 项目依赖与命令脚本 +``` + +## 核心特性 +1. **移动端自适应**: 采用 `lib-flexible` 结合 `postcss-pxtorem` 实现自动将 `px` 转换为 `rem`，智能适配不同移动设备屏幕尺寸。 +2. **自动化导入**: + - 借助 `unplugin-vue-components` 自动按需引入 Vant 组件，有效减少打包体积。 + - 借助 `unplugin-auto-import` 自动引入 `vue` 和 `vue-router` 等核心 API，无需在组件内手动 `import`。 +3. **数据加密通信**: 在 `src/common/ajax.js` 中对 Axios 进行了深度封装，支持基于 RSA 与 AES 的参数加解密，并内置签名 (Sign) 生成算法，保障前后端数据传输安全。 +4. **移动端调试**: 在开发或测试环境通过 `vite-plugin-vconsole` 注入 `vConsole` 面板，方便在移动端真机进行调试。 +5. **代码规范检查**: 结合 `Husky` + `Commitlint` 在代码提交前对 Git Commit Message 进行规范校验，同时集成 ESLint & Prettier 进行代码格式化。 +6. **兼容性处理**: 引入 `@vitejs/plugin-legacy` 以兼容传统浏览器不支持 ESM 的情况。 + +## 快速开始 + +### 1. 安装依赖 + +推荐使用 `yarn`： ```bash yarn install ``` - -npm 安装 - +或者使用 `npm`： ```bash npm install ``` -# 运行开发 +### 2. 本地开发运行 ```bash yarn dev -``` - -```bash +# 或 npm run dev ``` -# 测试打包 +### 3. 测试环境打包 ```bash yarn build:stage +# 或 +npm run build:stage ``` -```bash -npm build:stage -``` - -# 生产打包 +### 4. 生产环境打包 ```bash yarn build:prod +# 或 +npm run build:prod ``` +### 5. 代码检查与修复 + ```bash -npm build:prod +# 检查 +yarn lint + +# 检查并自动修复 +yarn lint:fix ``` + +## 环境变量说明 +- `.env.development`: 本地开发环境变量配置。 +- `.env.staging`: 测试/预发布环境变量配置。 +- `.env.production`: 生产环境变量配置。 + +*部分核心变量（根据各环境配置）*: +- `VITE_ENV`: 当前环境标识 (development/staging/production) +- `VITE_CONSOLE`: vConsole 调试面板开关 (1 开启, 0 关闭) +- `VITE_ENCRYPTION`: 接口请求参数是否开启加密的开关控制 +- `VITE_BASE_API`: 后端接口基础路径 diff --git a/src/App.vue b/src/App.vue index 0c517cf..7b7fd06 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,8 +13,8 @@ const KeepAliveList = ref([]) router.beforeEach((to, from, next) => { const keepAlive = to?.meta?.keepAlive - if (!router.hasRoute(to.name)) { - router.push('/error') + if (!to.matched.length) { + next('/home') return } diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss index 32e8b85..748e5f5 100644 --- a/src/assets/scss/index.scss +++ b/src/assets/scss/index.scss @@ -1,4 +1,4 @@ -@import './normalize'; +@use './normalize'; *, *::before, @@ -11,7 +11,6 @@ } [data-theme='dark'] { - &, * { color-scheme: dark !important; @@ -20,7 +19,6 @@ } [data-theme='light'] { - &, * { color-scheme: light !important; @@ -93,4 +91,4 @@ font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; line-height: 24px !important; -} \ No newline at end of file +} diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 40dd5a3..6a3bd8b 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,5 +1,5 @@