{"id":20903,"library":"af-mobile-client-vue3","title":"af-mobile-client-vue3","description":"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.","status":"active","version":"1.5.81","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install af-mobile-client-vue3","lang":"bash","label":"npm"},{"cmd":"yarn add af-mobile-client-vue3","lang":"bash","label":"yarn"},{"cmd":"pnpm add af-mobile-client-vue3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core framework dependency","package":"vue","optional":false},{"reason":"Build tool and dev server","package":"vite","optional":false},{"reason":"Mobile UI component library","package":"vant","optional":false},{"reason":"State management","package":"pinia","optional":false},{"reason":"Micro-frontend framework for host capabilities","package":"micro-app","optional":true}],"imports":[{"note":"The package is a project template, not a library; you import your own components, not from this package.","wrong":"import App from 'af-mobile-client-vue3'","symbol":"App","correct":"import App from './App.vue'"},{"note":"Vue utilities are imported directly from 'vue', not from this package.","wrong":"import { createApp } from 'af-mobile-client-vue3'","symbol":"Vue","correct":"import { createApp } from 'vue'"},{"note":"Vant components are imported from the 'vant' package, not from this template.","wrong":"import { Button } from 'af-mobile-client-vue3'","symbol":"Vant","correct":"import { Button } from 'vant'"}],"quickstart":{"code":"# Clone the template (assuming you have derived the repo)\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Example usage in a component after setup:\n<template>\n  <van-button type=\"primary\">Primary Button</van-button>\n</template>\n\n<script setup lang=\"ts\">\n// No import needed if using automatic component registration\n</script>","lang":"typescript","description":"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."},"warnings":[{"fix":"Use this package as a starter template by cloning or deriving its repository, then modify for your needs.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade Node to >=20.19.0 using nvm or other version manager.","message":"Requires Node.js >=20.19.0. Older Node versions will fail to install or run.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove micro-app from package.json and delete microApps.ts if not using micro-frontend.","message":"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).","severity":"gotcha","affected_versions":"all"},{"fix":"Use components in templates without explicit import; if you need to import manually, ensure auto-import is disabled.","message":"Automatic component registration (unplugin-vue-components) is configured; manually importing Vant components may cause double registration or conflicts.","severity":"gotcha","affected_versions":"all"},{"fix":"Update references in your derived project to match your actual project name.","message":"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.","severity":"deprecated","affected_versions":"<=1.5.81"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Upgrade Node.js to version 20.19.0 or higher (e.g., nvm install 20.19.0 && nvm use 20.19.0)","cause":"Node version is below the minimum required 20.19.0","error":"Error: The engine \"node\" is incompatible with this module. Expected version \">=20.19.0\". Got \"16.x.x\""},{"fix":"Run 'pnpm install' to install all dependencies, including Vant, which is a dependency of this template.","cause":"Vant dependency not installed or not in package.json","error":"Module not found: Error: Can't resolve 'vant'"},{"fix":"Do not import anything from 'af-mobile-client-vue3'; instead use Vant components directly from 'vant' package.","cause":"Attempting to import and use a component from 'af-mobile-client-vue3' which is a template, not a library","error":"TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Remove or comment out imports and references to microApps.ts in your router configuration.","cause":"If not using micro-app, the microApps.ts file is missing or not configured","error":"Error: The 'microApps' is not defined in vue-router"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}