<h2>Overview</h2>
<p>Vue Vben Admin is a free and open-source middle and back-end template. It utilizes the latest technologies such as Vue 3, Vite 2, TypeScript, and more. This template provides out-of-the-box solutions for middle and back-end front-end development and can also serve as a learning reference.</p>
<h2>Features</h2>
<ul>
<li><strong>State-of-the-Art Development</strong>: Utilizes front-end technologies such as Vue 3 and Vite 2 for modern development practices.</li>
<li><strong>TypeScript</strong>: Uses TypeScript, a JavaScript superset, for application-level programming.</li>
<li><strong>Theming</strong>: Provides configurable themes for customizing the visual appearance of the application.</li>
<li><strong>Internationalization</strong>: Includes a complete built-in internationalization program for multi-language support.</li>
<li><strong>Mock Server</strong>: Comes with a built-in mock data scheme for simulating server responses during development.</li>
<li><strong>Dynamic Routing Permission Generation</strong>: Includes a complete authority system that dynamically generates routing permissions.</li>
<li><strong>Multiple Components</strong>: Encapsulates multiple commonly used components for easy reuse in projects.</li>
</ul>
<h2>Summary</h2>
<p>Vue Vben Admin is a powerful middle and back-end template that utilizes the latest technologies and provides various out-of-the-box solutions. With features such as theming, internationalization, and a built-in mock server, it offers a comprehensive development environment for building modern web applications. Its easy installation process ensures that developers can quickly set up and start using the template for their projects.</p>


<h2>Overview:</h2>
<p>Vben3 is a free and open-source admin template built with the latest technologies like Vue 3, Vite 4, TypeScript, among others. It is a ready-to-use solution for frontend development in the admin panel area and can also be utilized for learning purposes.</p>
<h2>Features:</h2>
<ul>
<li><strong>Vue 3</strong>: Built using the latest version of the Vue framework.</li>
<li><strong>Vite 4</strong>: Utilizes Vite as the build tool for quick and efficient development.</li>
<li><strong>TypeScript</strong>: Developed using TypeScript for type-safe coding.</li>
<li><strong>Admin Template</strong>: Ready-to-use frontend solution for admin panels.</li>
<li><strong>Open Source</strong>: Available for all users to access and contribute.</li>
<li><strong>Documentation</strong>: Detailed documentation repository available for reference.</li>
<li><strong>Community Support</strong>: Active QQ group for Vben3 users to engage and support each other.</li>
</ul>
<h2>Summary:</h2>
<p>Vben3 is a modern admin template that incorporates the latest technologies to provide users with a feature-rich solution for backend development. With comprehensive documentation and community support, Vben3 offers a valuable resource for developers looking to build admin panels efficiently. By following the installation guide, users can quickly set up and explore the capabilities of Vben3 for their projects.</p>


<h2>Overview</h2>
<p>The vite-plugin-html is a plugin for the Vite build tool that provides capabilities for HTML compression and EJS template functionality. It also supports multi-page applications and allows for customization of entry points and templates.</p>
<h2>Features</h2>
<ul>
<li><strong>HTML compression capability</strong>: Reduce the size of HTML files for improved performance.</li>
<li><strong>EJS template capability</strong>: Use EJS syntax to inject dynamic content into HTML files.</li>
<li><strong>Multi-page application support</strong>: Configure and build multi-page applications.</li>
<li><strong>Support custom entry</strong>: Customize the entry file path for each page.</li>
<li><strong>Support custom template</strong>: Specify a relative path to the HTML template for each page.</li>
</ul>
<h2>Usage</h2>
<ol>
<li>Add EJS tags to your index.html file to indicate where you want to inject dynamic content.</li>
<li>Configure the plugin in the vite.config.ts file. This method allows you to introduce the required functions as needed.</li>
</ol>
<pre><code class="language-typescript">import { UserOptions } from 'vite-plugin-html';

createHtmlPlugin(options: UserOptions)
</code></pre>
<ul>
<li><strong>entry</strong>: Specify the entry file path for each page. The default is <code>src/main.ts</code>.</li>
<li><strong>template</strong>: Specify the relative path to the HTML template for each page. The default is <code>index.html</code>.</li>
<li><strong>inject</strong>: Data injected into HTML using the <code>InjectOptions</code> configuration.</li>
<li><strong>minify</strong>: Option to compress HTML. Set to <code>true</code> or set <code>MinifyOptions</code> for custom configuration.</li>
<li><strong>pages</strong>: Configuration for multi-page applications.</li>
</ul>
<pre><code class="language-typescript">interface InjectOptions {
  data: Record&#x3C;string, any>;
  ejsOptions: EJSOptions;
  tags: HtmlTagDescriptor[];
}

interface MinifyOptions {
  // Custom compression configuration
}

interface PageOption {
  filename: string;
  template: string;
  entry: string;
  injectOptions: InjectOptions;
}
</code></pre>
<p>Data can be accessed in HTML using the EJS template syntax.</p>
<p>By default, the contents of the <code>.env</code> file will be injected into the <code>index.html</code> file, similar to Vite's <code>loadEnv</code> function.</p>
<h2>Summary</h2>
<p>The vite-plugin-html is a useful plugin for the Vite build tool that adds HTML compression and EJS template functionality. It supports multi-page applications and allows for customization of entry points and templates. With its features and easy installation, it provides developers with greater flexibility in building optimized and dynamic web applications.</p>


<h2>Overview</h2>
<p>The <code>vite-plugin-style-import</code> is a plugin for the Vite.js build tool that allows for importing component library styles on demand. While Vite already supports on-demand imports for component libraries, this plugin specifically addresses the need for on-demand style imports.</p>
<h2>Features</h2>
<ul>
<li><strong>On-demand style import</strong>: Allows for importing component library styles only when needed.</li>
<li><strong>Easy installation</strong>: Can be installed using either yarn or npm.</li>
<li><strong>Configurable plugin options</strong>: Provides options for configuring the plugin behavior, such as the directory and file format to be converted, excluded files/folders, and a list of libraries to be imported.</li>
</ul>
<h2>Summary</h2>
<p>The <code>vite-plugin-style-import</code> is a useful plugin for Vite.js that allows for on-demand style imports of component libraries. It simplifies the process of importing styles by providing easy installation and configurable options. With this plugin, developers can improve the performance and efficiency of their Vite.js projects.</p>


<h2>Overview:</h2>
<p>The content provides a guide on how to locally develop the Vue Vben Admin Doc theme.</p>
<h2>Features:</h2>
<ul>
<li><strong>Step-by-step Guide:</strong> Provides a detailed tutorial on setting up local development for Vue Vben Admin Doc theme.</li>
<li><strong>Code Snippets:</strong> Includes code snippets for easier implementation.</li>
<li><strong>Troubleshooting Tips:</strong> Offers solutions for common issues that may arise during installation.</li>
</ul>
<h2>Summary:</h2>
<p>The article provides a comprehensive guide on setting up local development for the Vue Vben Admin Doc theme. It includes step-by-step instructions, code snippets, and troubleshooting tips, making it easier for developers to work on the theme locally.</p>


<h2>Overview</h2>
<p>Vue Vben Admin is a free and open source middle and back-end template that is built using the latest technologies such as Vue3, Vite4, and TypeScript. It provides out-of-the-box solutions for middle and back-end front-end development and can also be used for learning reference.</p>
<h2>Features</h2>
<ul>
<li>State of the Art Development: Uses front-end technologies such as Vue3 and Vite2</li>
<li>TypeScript: Built with application-level JavaScript language</li>
<li>Theming: Configurable themes</li>
<li>Internationalization: Built-in complete internationalization program</li>
<li>Mock Server: Built-in mock data scheme</li>
<li>Authority: Built-in complete dynamic routing permission generation scheme</li>
<li>Component: Multiple commonly used components are encapsulated twice</li>
</ul>
<h2>Summary</h2>
<p>Vue Vben Admin is a powerful middle and back-end template built using the latest technologies. It provides a wide range of features such as state-of-the-art development tools, theming options, internationalization support, mock data server, and dynamic routing permission generation. Installing the template is easy with the provided code snippets. Overall, Vue Vben Admin is a great choice for anyone looking for a comprehensive solution for their middle and back-end front-end development needs.</p>


Vbenjs

Vben Admin Thin Next

Vben3

Vite Plugin Compression

Vite Plugin Html

Vite Plugin Imagemin

Vite Plugin Mock

Vite Plugin Style Import

Vite Plugin Svg Icons

Vite Plugin Theme

Vite Plugin Vue Setup Extend

Vue Vben Admin Doc

Vue Vben Admin