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.

Installation:

To install and use the Vant Template, follow these steps:

1. Make sure you have the required environment configurations:

   • Node >= 12.18.0
   • npm >= 6.14.0

2. Fork the Vant Template repository from the provided address: https://github.com/PLQin/vue-vant-template

3. Clone the repository to your local machine using the git clone command or download it as a ZIP file.

4. Open the repository in your preferred development environment (e.g., Visual Studio Code).

5. Install the project dependencies by running the following command in the project directory: npm install

6. Start the development server by running the command: npm run serve

7. The template is now ready for use. Customize it according to your requirements and start building your project.

Summary:

The Vant Template is a feature-rich Vue template that provides a range of functionalities and configurations to enhance the development process. With easy installation and comprehensive documentation, it simplifies the process of building Vue projects and accelerating development speed. The template offers features like mock servers, WeChat browser blocking, mobile adaptation, number precision, axios wrapper, code standard enforcement, and more. It also provides a well-defined directory structure and a wide range of reusable components for building efficient and scalable projects.