Overview

The varlet-app-template is a lightweight mobile web template developed using Vue3, Varlet, Vite, and Typescript. It offers a range of features and built-in functionality, making it easy to get started with mobile web development.

Features

• Developed based on Vue3, Varlet, Vite, Typescript: The template utilizes the latest versions of Vue, Varlet for UI components, and Vite for fast development.
• Automatic and on-demand import of built-in and third-party component libraries: The template intelligently imports the required component libraries, reducing bundle size and improving performance.
• Built-in stack routing navigation similar to native apps: The template provides a built-in stack-based routing system, making navigation similar to native mobile apps.
• Built-in conventional routing based on file directory structure: Additionally, the template supports conventional routing based on the structure of the project’s file directories.
• Built-in application-level internationalization: Internationalization support is included, making it easy to create multilingual applications.
• Built-in request library integration with support for composition API: The template includes a built-in request library and supports the composition API for managing asynchronous requests.
• Built-in theme customization: Customize the theme of your application with ease using the built-in theme customization functionality.
• Built-in mobile debugging tool: The template includes a mobile debugging tool, making it convenient to debug and test applications on mobile devices.
• Built-in Pinia for state management: State management is simplified with the built-in Pinia library, providing a reactive and efficient way to manage application state.
• Built-in MockJS for data mocking: The template includes MockJS, allowing developers to generate mock data for testing and development purposes.
• Built-in Vitest for unit testing: Unit testing is made easy with the built-in Vitest library, enabling developers to write and execute tests for their application.
• Built-in code checking/formating tools: The template includes ESLint, CommitLint, Lint-staged, and Prettier for code checking and formatting, ensuring consistent and clean code.
• Officially maintained by Varletjs: The template is officially maintained by Varletjs, providing support and updates for future versions.

Installation

To use the varlet-app-template, follow the steps below:

1. Get Project: Either create a repository from the template repository or clone the repository to your local machine.
2. Install Dependencies: Navigate to the project directory and install the dependencies using the package manager of your choice (e.g., npm or yarn).

# Using npm
npm install

# Using yarn
yarn install

3. Start the development environment: Once the dependencies are installed, start the development environment.

# Using npm
npm run dev

# Using yarn
yarn dev

4. Build and Preview: Build the project for production and preview it locally.

# Using npm
npm run build
npm run serve

# Using yarn
yarn build
yarn serve

5. Lint Code: Run linting tools for code checking.

# Using npm
npm run lint

# Using yarn
yarn lint

6. TS type checking: Perform TypeScript type checking.

# Using npm
npm run check

# Using yarn
yarn check

7. Code Formatting: Format the code using the configured code formatting tools.

# Using npm
npm run format

# Using yarn
yarn format

8. Running Unit Tests: Execute unit tests and generate test reports.

# Using npm
npm run test:unit

# Using yarn
yarn test:unit

Summary

The varlet-app-template is a feature-rich lightweight mobile web template that provides a solid foundation for developing mobile web applications using Vue3, Varlet, Vite, and Typescript. With its numerous built-in features, such as stack routing, internationalization, theme customization, and testing capabilities, developers can quickly get started with building modern mobile web applications. The template is officially maintained by Varletjs, ensuring updates and support for future versions.