af-mobile-client-vue3

1.5.81 verified Mon Apr 27 auth: no javascript

A Vue 3 + Vite 5 mobile application template integrating Vant 4, Pinia 2, and TypeScript, designed as a micro-frontend host for micro-app. Current stable version is 1.5.81. It provides a complete mobile development scaffold with automatic component importing, mock server support, dark mode, and Git hooks. Differentiators: pre-configured for micro-app micro-frontend architecture, opinionated directory structure, and Chinese-friendly documentation. Requires Node >=20.19.0 as per engines field.

Common errors

error Error: The engine "node" is incompatible with this module. Expected version ">=20.19.0". Got "16.x.x" ↓

cause Node version is below the minimum required 20.19.0

fix

Upgrade Node.js to version 20.19.0 or higher (e.g., nvm install 20.19.0 && nvm use 20.19.0)

error Module not found: Error: Can't resolve 'vant' ↓

cause Vant dependency not installed or not in package.json

fix

Run 'pnpm install' to install all dependencies, including Vant, which is a dependency of this template.

error TypeError: Cannot read properties of undefined (reading 'install') ↓

cause Attempting to import and use a component from 'af-mobile-client-vue3' which is a template, not a library

fix

Do not import anything from 'af-mobile-client-vue3'; instead use Vant components directly from 'vant' package.

error Error: The 'microApps' is not defined in vue-router ↓

cause If not using micro-app, the microApps.ts file is missing or not configured

fix

Remove or comment out imports and references to microApps.ts in your router configuration.

Warnings

gotcha The package is a project template, not a reusable npm library. Do not attempt to import components from 'af-mobile-client-vue3' in your own projects. ↓

fix Use this package as a starter template by cloning or deriving its repository, then modify for your needs.

gotcha Requires Node.js >=20.19.0. Older Node versions will fail to install or run. ↓

fix Upgrade Node to >=20.19.0 using nvm or other version manager.

gotcha This template is designed to be a micro-app (micro-frontend) host. If you do not use micro-app, you may need to remove related configuration (e.g., micro-app dependency, microApps.ts registration). ↓

fix Remove micro-app from package.json and delete microApps.ts if not using micro-frontend.

gotcha Automatic component registration (unplugin-vue-components) is configured; manually importing Vant components may cause double registration or conflicts. ↓

fix Use components in templates without explicit import; if you need to import manually, ensure auto-import is disabled.

deprecated The README references 'af-example-mobile-vue-web' as an example project name. This package is 'af-mobile-client-vue3' and the example project may be outdated. ↓

fix Update references in your derived project to match your actual project name.

Install

npm install af-mobile-client-vue3

yarn add af-mobile-client-vue3

pnpm add af-mobile-client-vue3

Imports

App
wrong
```
import App from 'af-mobile-client-vue3'
```
correct
```
import App from './App.vue'
```
The package is a project template, not a library; you import your own components, not from this package.

Vue

wrong

import { createApp } from 'af-mobile-client-vue3'

correct

import { createApp } from 'vue'

Vue utilities are imported directly from 'vue', not from this package.

Vant
wrong
```
import { Button } from 'af-mobile-client-vue3'
```
correct
```
import { Button } from 'vant'
```
Vant components are imported from the 'vant' package, not from this template.

Quickstart

Shows how to start development with the template: install dependencies, run dev server, build, and use a Vant button component without explicit import due to auto-import.

# Clone the template (assuming you have derived the repo)
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Example usage in a component after setup:
<template>
  <van-button type="primary">Primary Button</van-button>
</template>

<script setup lang="ts">
// No import needed if using automatic component registration
</script>