Vant Template

基于 Vue 3 + Vant 4 + VantVTK 的移动端开发模板

🚀 特性

• ⚡️ Vue 3 + Vite - 最新的前端技术栈
• 📱 Vant 4 - 优秀的移动端组件库
• 🎨 VantVTK - Vue 3 版本的 Vant 组件库
• 📁 完善的项目结构
• 🔧 开箱即用的配置

📦 模版

更新

# 更新版本号
npm version patch    # 1.0.0 -> 1.0.1 (补丁版本)
npm version minor    # 1.0.1 -> 1.1.0 (次要版本)
npm version major    # 1.1.0 -> 2.0.0 (主要版本)

# 1. 测试包内容（查看会发布哪些文件）
npm pack --dry-run

# 2. 正式发布
npm publish

# 3. 如果是作用域包（如 @username/package-name）
npm publish --access public

# 查看帮助
vant-tmpl --help

# 查看版本
vant-tmpl --version

# 正常创建项目
vant-tmpl my-project

# 强制覆盖已存在目录
vant-tmpl my-project --force

安装

npm create vant-tmpl my-app

包管理

# 1. 先检查包状态
npm view vant-tmpl

# 2. 如果在72小时内，可以完全删除
npm unpublish vant-tmpl --force

# 3. 如果超过72小时，标记为废弃
npm deprecate vant-tmpl "Please use create-vant-tmpl instead"

# 4. 验证 create-vant-tmpl 工作正常
npm init vant-tmpl test-project

## 📦 使用方法

### 通过 npm 初始化

```bash
npm init vant-tmpl my-project
cd my-project
npm install
npm run dev

手动克隆

git clone https://github.com/yourusername/vant-tmpl.git
cd vant-tmpl/template
npm install
npm run dev

🗂 项目结构

src/
├── api/                    # API 接口
├── assets/                 # 静态资源
│   ├── css/               # 样式文件
│   ├── icon/              # 图标文件
│   └── img/               # 图片资源
├── components/             # 组件
│   ├── common/            # 通用组件
│   └── business/          # 业务组件
├── composables/            # 组合式函数
├── layouts/                # 布局组件
├── plugins/                # 插件配置
├── router/                 # 路由配置
├── stores/                 # 状态管理
├── utils/                  # 工具函数
├── views/                  # 页面组件
├── App.vue                 # 根组件
└── main.js                 # 入口文件

🛠 开发命令

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 代码检查
npm run lint

# 单元测试
npm run test

📱 技术栈

• Vue 3
• Vant 4
• Vite
• Pinia
• Vue Router

📄 License

MIT