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


<h2>Overview:</h2>
<p>Varlet UTE is a theme editing tool that is based on VARLET and maintained by the community team. It provides theme editing capabilities for all components of the VARLET component library. The exported theme package is lightweight and it supports editing dark mode. The tool has complete Chinese and English documentation and logistical support. It is developed using VARLET CLI, ensuring an interactive experience consistent with the official VARLET documentation.</p>
<h2>Features:</h2>
<ul>
<li><strong>Theme Editing Capabilities</strong>: Varlet UTE allows users to edit themes for all components of the VARLET component library.</li>
<li><strong>Lightweight Theme Package</strong>: The exported theme package is optimized to be lightweight, ensuring fast loading times.</li>
<li><strong>Dark Mode Support</strong>: Users can easily edit and customize themes for dark mode, providing a seamless experience for users who prefer dark color schemes.</li>
<li><strong>Chinese and English Documentation</strong>: Varlet UTE comes with comprehensive documentation available in both Chinese and English, making it accessible to a wider user base.</li>
<li><strong>Logistical Support</strong>: The tool is backed by a community team that provides logistical support to users, ensuring any issues or problems are addressed promptly.</li>
<li><strong>Developed using VARLET CLI</strong>: Varlet UTE is built using VARLET CLI, ensuring an interactive experience that is consistent with the official VARLET documentation.</li>
<li><strong>Internationalization Support</strong>: Varlet UTE supports internationalization, allowing users to easily switch between different languages for their themes.</li>
</ul>
<h2>Summary:</h2>
<p>Varlet UTE is a powerful theme editing tool for VARLET that allows users to customize themes for all components of the VARLET component library. With its lightweight theme package, support for dark mode, and internationalization capabilities, Varlet UTE provides a seamless and efficient way for developers to create visually appealing and user-friendly themes. Supported by a community team, Varlet UTE ensures that users have the necessary support and resources to make the most out of this tool.</p>


<h2>Overview</h2>
<p>Varlet-vue2 is a Material design mobile component library developed based on Vue2. It provides a range of high-quality general-purpose components and offers support for various features such as theme customization, internationalization, and syntax highlighting in IDEs like WebStorm and VS Code. The library is developed and maintained by partners in the community and is well-documented in both Chinese and English.</p>
<h2>Features</h2>
<ul>
<li><strong>50 high quality general purpose components</strong>: Varlet-vue2 offers a wide range of components that can be used for various purposes.</li>
<li><strong>Lightweight components</strong>: The components in Varlet-vue2 are designed to be lightweight, ensuring optimal performance.</li>
<li><strong>Chinese and English documentation and logistics support</strong>: The library provides complete documentation and support in both Chinese and English.</li>
<li><strong>On-demand introduction</strong>: Varlet-vue2 supports on-demand introduction of components, allowing users to easily learn and understand each component.</li>
<li><strong>Theme customization</strong>: Users can easily customize the theme of Varlet-vue2 components according to their preferences.</li>
<li><strong>Internationalization support</strong>: Varlet-vue2 provides support for internationalization, making it easy to localize the components for different languages.</li>
<li><strong>Syntax highlighting in IDEs</strong>: IDEs like WebStorm and VS Code have built-in support for syntax highlighting of Varlet-vue2 components.</li>
<li><strong>SSR support</strong>: Varlet-vue2 is compatible with server-side rendering (SSR) setups.</li>
<li><strong>Typescript support</strong>: The library supports Typescript, allowing developers to use static typing in their projects.</li>
<li><strong>Unit testing and stability assurance</strong>: Varlet-vue2 ensures stability by maintaining over 90 percent unit test coverage.</li>
<li><strong>Dark mode support</strong>: The library offers support for dark mode, allowing users to switch between light and dark themes.</li>
</ul>
<h3>CDN</h3>
<p>If you prefer using a CDN, you can include the following script tag in your HTML file:</p>
<pre><code class="language-html">&#x3C;script src="https://cdn.jsdelivr.net/npm/varlet-vue2@X.X.X/dist/index.js">&#x3C;/script>
</code></pre>
<p>Replace <code>X.X.X</code> with the specific version of Varlet-vue2 that you want to use.</p>
<h3>Webpack / Vite</h3>
<p>If you are using Webpack or Vite, you can install Varlet-vue2 using npm or yarn:</p>
<pre><code class="language-bash">npm install varlet-vue2
</code></pre>
<p>or</p>
<pre><code class="language-bash">yarn add varlet-vue2
</code></pre>
<p>After installing, you can import and use Varlet-vue2 in your Vue app:</p>
<pre><code class="language-javascript">import Varlet from 'varlet-vue2';

createApp(App)
  .use(Varlet)
  .mount('#app');
</code></pre>
<p>Replace <code>App</code> with the root component of your Vue app.</p>
<h2>Summary</h2>
<p>Varlet-vue2 is a Material design mobile component library for Vue2. It offers a wide range of lightweight components and supports various features such as theme customization, internationalization, and syntax highlighting. The library is well-documented and provides a stable and reliable solution for building mobile applications using Vue2.</p>


<h2>Overview:</h2>
<p>Varlet is a Material design mobile component library developed based on Vue3. It is a lightweight library that provides over 60 high-quality general-purpose components. The library is developed and maintained by the Varletjs community team and offers complete Chinese and English documentation and logistics support. Varlet also supports on-demand introduction, theme customization, internationalization, WebStorm syntax highlighting, SSR, TypeScript, dark mode, and provides official VSCode extension.</p>
<h2>Features:</h2>
<ul>
<li><strong>60+ High Quality General Purpose Components</strong></li>
<li><strong>Lightweight Components</strong></li>
<li><strong>Complete Chinese and English Documentation</strong></li>
<li><strong>On-Demand Introduction</strong></li>
<li><strong>Theme Customization</strong></li>
<li><strong>Internationalization Support</strong></li>
<li><strong>WebStorm Syntax Highlighting</strong></li>
<li><strong>SSR Support</strong></li>
<li><strong>TypeScript Support</strong></li>
<li><strong>Unit Test Coverage</strong></li>
<li><strong>Dark Mode Support</strong></li>
<li><strong>Official VSCode Extension</strong></li>
</ul>
<h3>CDN:</h3>
<pre><code class="language-html">&#x3C;link rel="stylesheet" href="https://unpkg.com/varlet-ui/dist/varlet.min.css">
&#x3C;script src="https://unpkg.com/varlet-ui">&#x3C;/script>
</code></pre>
<h3>Webpack / Vite:</h3>
<pre><code class="language-bash">$ npm install varlet-ui
# or
$ yarn add varlet-ui
</code></pre>
<h3>Playground:</h3>
<p>You can visit the Varlet UI Playground to have a better understanding of the library.</p>
<h3>Contribution:</h3>
<p>If you want to contribute to Varlet, you can refer to the Contributing Guide for more information.</p>
<h3>Cloud IDE:</h3>
<p>You can start working with Varlet on a Cloud IDE.</p>
<h2>Summary:</h2>
<p>Varlet is a mobile component library developed based on Vue3, offering a wide range of lightweight components for building mobile applications. With its comprehensive documentation, theme customization, and internationalization support, Varlet provides developers with an easy-to-use and versatile toolkit. Its support for WebStorm syntax highlighting, SSR, TypeScript, and unit test coverage ensures stability and reliability. Additionally, Varlet offers dark mode support and an official VSCode extension for an enhanced development experience.</p>


Varletjs

Varlet App Template

Varlet Icons Library Starter

Varlet Nuxt

Varlet Ute

Varlet Vue2

Varlet