Initialize your Vue 2 project via Vue CLI by running the following command, making sure to select the vue-router option when prompted during the setup flow: vue create <your-project-identifier>

Once the project is created, start the local development server with: npm run serve

The default generated project stores reusable, non-route-bound components under the src/components directory, while src/views is reserved for page components that are rendered via route matching.

First clean up the default boilerplate code:

• Remove all built-in template code from App.vue
• Delete all demo components in the src/components and src/views directories
• Clear preconfigured default routes and related code in router/index.js

Install Vant via npm as outlined in the official Vant documentation. For faster development iteration, import all Vant components globally in the main.js entry file first; you can optimize to on-demand imports during production deployment to reduce bundle size. Be careful to avoid duplicate Vue imports in the entry file.

Custom Component Setup

Create required reusable .vue single-file components under src/components, and organize page components into categorized subfolders under src/views for better maintainability. Add the basic <template>, <script>, and <style> scaffolding for each newly created component file first.

Vant Component Usage and Theme Customization

Since all Vant component are imported globally, you can directly use any component listed in the official Vant documantation in your templates without additional per-component import statements.

Vant uses Less variables to define all default styles, so you can customize the component library theme by overriding these variables. Follow these steps to configure custom themes:

1. Replace the default Vant CSS import in main.js with an import of vant/lib/index.less
2. Create a vue.config.js file in your project root if it does not already exist. To avoid restarting the dev server every time you adjust theme styles, use the Less file override method instead of hardcoding variables in the config file. Create a theme.less file under the src directory to store all your custom style variables, then reference this file in the Vue config as shown below:

module.exports = { css: { loaderOptions: { less: { // Remove the lessOptions wrapper if you are using less-loader v5 or earlier lessOptions: { modifyVars: { // Import custom Less file to override default Vant style variables hack: true; @import "${customThemeFile}";, }, }, }, }, } }

</details>

<details><summary>View theme.less sample code</summary>

// Override Vant built-in Less variables in this file @primary-brand-color: #1677ff;

// Customize Navbar style variables @nav-bar-background: @primary-brand-color; @nav-bar-title-text-color: #ffffff; @nav-bar-icon-color: #ffffff;

</details>

### Axios Encapsulation for Network Requests
After completing the basic page structure and style implementation with Vant components, you can start sending network requests to fetch backend data. In most cases, requests are initiated in parent page components, with fetched data passed down to child components via props for rendering.

The core of axios encapsulation includes unified configuration of request base URLs for different environments, request interceptors for adding authentication tokens and standard request headers, and response interceptors for unified error handling and data preprocessing. Refer to standard Vue project axios encapsulation guidelines for specific implementation code. Once data is returned successfully, you can directly pass it to corresponding Vant components for rendering; all common interaction and layout requirements can be implemented by referencing the official Vant component documentation.