Vue Vant Template

Overview:

Vant Template is a ready-to-use template with basic pages, examples, and convenient configurations. It can be forked and used immediately. The repository address is provided in the content.

Features:

• Mock Server: Easily run the mock server with the command npm run mock and then npm run serve:local.
• WeChat Browser Blocking: If a user opens a project created with this template in a WeChat browser, a popup will appear prompting them to open the webpage in a system browser.
• Number Precision: Avoids precision issues in calculations by introducing the number-precision module.
• Mobile Adaptation: The template uses px to vw conversion for mobile adaptation. For px to rem conversion, refer to the documentation in the "docs" directory.
• Route Caching: The template does not support (and does not plan to support) global route caching. However, you can try integrating modules like vue-navigation or customize the configuration at the <router-view /> location.
• Built-in Decorators: The template provides a few built-in decorators for simpler code implementation in certain scenarios, such as debounce and confirmation prompts.
• Gzip Compression: Configure compression tool to automatically compress static resources into gz files during build, improving loading speed when the server enables gzip.
• Axios Wrapper: The template has a secondary wrapping for axios. Adjust token acquisition method in the "src/utils/request.js" file.
• Date Utility: The template uses dayjs, a widely-used time and date library, as it has a small size compared to moment.js and supports UTC and internationalization.
• Code Standard: The template integrates eslint for comprehensive code standard control. It is recommended to use development tools like VSCode and install the ESLint plugin.
• Commit Standard: A commit standard is defined to enforce code formatting check and automatic formatting during code submission.
• CDN Support: The template provides a separate "cdn.js" file in the "config" directory for CDN configuration, allowing easy addition and closure of CDN usage for specific files.
• Directory Structure: The template has a complete directory structure, with a "base" directory containing basic components without business logic and a "components" directory containing business-related components. It also includes a loading component that can be directly called as this.$loading().
• Documentation: The template includes a documentation module to document multiple configuration choices for certain functionalities with examples, facilitating easy switching between options.
• Command Summary: The template provides a summary of all the commands to be used, including "npm run serve" for regular development and "npm run serve:mock" and "npm run mock" for data support from the mock server.