xiaowu-vue

一个基于 Vue3 + Vant4 的移动端项目模板，采用最新的技术栈和最佳实践。

特性

• 📦 技术栈：Vue3 + Vite + Pinia + Vant4
• 📱 移动端适配：rem 方案 (web 也是保持的 iPhone6 样式)
• 🚀 自动化：
  • 自动路由生成
  • VUE 组件自动导入
  • VUE API自动导入
  • Vant 组件自动导入
• 封装 request
  • 自动添加 Token：在请求头中自动添加 Authorization。
  • 请求取消：支持自动取消重复请求和手动取消所有请求。
  • 统一错误处理：可选择根据业务状态码（code）或 HTTP (status)状态码统一处理错误。
  • 请求重试：对网络错误或服务器错误（5xx）自动重试。
  • 登录过期处理：当 HTTP 状态码为 401 时，自动跳转到登录页。
  • 自定义配置：支持通过配置禁用错误提示。
• 🔒 安全性：
  • 登录验证
  • 多种加密
  • 路由守卫
  • Token 管理
• 🛠️ 开发体验：
  • 打包分析
  • 开发调试
• 📦 组件封装：
  • NavBar 导航栏
  • Tabbar 标签栏

可选择 js,ts,i18n,eslint,prettier,vitest等(目前模板有登录注册退出登录等功能,还在进一步完善中)

快速开始

安装

# npm
npm install -g xiaowu-vue

# yarn
yarn global add xiaowu-vue

# pnpm
pnpm add -g xiaowu-vue

创建项目

xiaowu-vue my-project
cd my-project
npm install
npm run dev

核心功能

1. 自动路由

路由生成规则

views/
  ├── home/
  │   └── index.vue         -> /home
  ├── auth/
  │   ├── login.vue        -> /auth/login
  │   └── register.vue     -> /auth/register
  └── user/
      └── UserProfile.vue   -> /user/user-profile

路由元信息

{
  hideTabbar: false,  // 是否隐藏底部导航栏
  keepAlive: true,    // 是否启用页面缓存
  title: '页面标题'    // 页面标题
}

2. 请求封装

基础用法

import request from '@/utils/request'

// GET 请求
request.get('/api/users')

// POST 请求
request.post('/api/login', {
  username: 'admin',
  password: '123456'
})

配置选项

request.post('/api/login', data, {
  noToast: true,      // 禁用错误提示
  retry: 3,           // 请求重试次数
  retryDelay: 1000    // 重试间隔
})

3. 加密工具

MD5 加密

import { encrypt, encryptWithSalt } from '@/utils/crypto'

// 基础加密
const hash = encrypt('password')

// 带盐加密
const saltedHash = encryptWithSalt('password', 'secret-key')

Base64 编码

import { base64Encode, base64Decode } from '@/utils/crypto'

// 编码
const encoded = base64Encode('Hello World')

// 解码
const decoded = base64Decode(encoded)

4. 组件使用

NavBar 导航栏

<template>
  <nav-bar 
    title="页面标题"
    :show-back="true"
    background-color="#ffffff"
    @click-right="onClickRight"
  />
</template>

Tabbar 标签栏

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

项目结构

src/
├── api/                # API 接口
├── assets/            # 静态资源
├── components/        # 公共组件
├── router/           # 路由配置
│   ├── autoRouter.js   # 自动路由
│   └── metaConfig.js   # 路由元信息
├── store/            # 状态管理
├── styles/           # 全局样式
├── utils/            # 工具函数
│   ├── request.js     # 请求封装
│   └── crypto.js      # 加密工具
└── views/            # 页面组件

开发指南

1. 新建页面

1. 在 views 目录创建 .vue 文件
2. 路由会自动生成
3. 可在 metaConfig.js 配置页面属性

2. 状态管理

// store/modules/user.js
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),
  actions: {
    // ...
  }
})

3. 样式开发

// 使用 rem 函数
.container {
  width: rem(375);
  height: rem(100);
  font-size: rem(14);
}

发布部署

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

注意事项

1. 移动端适配

   • 设计稿基准宽度：375px
   • 开发时使用 px，自动转换为 rem

2. 路由配置

   • 自动生成的路由支持嵌套
   • 可通过元信息控制页面行为

3. 安全性

   • 密码传输使用 MD5 加密
   • 敏感信息不要使用 Base64

更新日志

v1.0.0

• 初始版本发布
• 基础框架搭建
• 核心功能实现

贡献指南

1. Fork 本仓库
2. 创建特性分支
3. 提交代码
4. 发起 Pull Request

许可证

MIT