<h2>Overview:</h2>
<p>The HeroStory 王者荣耀故事站 is a small program that provides users with a platform to explore the background stories of heroes in the popular game "王者荣耀" (King of Glory). The developer was inspired by the anniversary celebration of the game and their personal interest in the characters and voice acting. The small program allows users to easily access the stories behind the heroes. The developer notes that due to the project being developed in their spare time, the presentation of the web crawling data on the PC side is a bit rough. The technology stack for this project includes small program, Nuxt, Koa2, Vue 2.0, Vuex, Nginx, and PM2.</p>
<h2>Features:</h2>
<ul>
<li><strong>Crawling Data</strong>: The small program includes a web crawler that retrieves data from the official website of "王者荣耀故事站" (King of Glory Story Station). The crawler utilizes the cheerio module and request-promise module to retrieve the desired data. The Iconv module is used to convert data into proper Chinese characters when necessary.</li>
<li><strong>Nuxt.js Framework</strong>: The project utilizes the Nuxt.js framework, which is based on Vue.js. Nuxt.js focuses on the UI rendering of client-side and server-side infrastructure. It provides a flexible application framework that can be used to initialize new projects or integrate into existing Node.js projects. The project configuration, including modules, plugins, and webpack, can be easily configured using the nuxt.config.js file.</li>
<li><strong>Small Program Development</strong>: The developer mentions that this is their first small program project. They found similarities between data binding in the small program and Vue.js, which helped with the development process. The article also references a helpful article ("一起脱去小程序的外套 - 微信小程序架构解析) that provides insights into the architecture of WeChat small programs.</li>
</ul>
<h2>Summary:</h2>
<p>The HeroStory 王者荣耀故事站 is a small program developed by the author to provide users with access to the background stories of heroes in the game "王者荣耀". The small program utilizes web scraping techniques and the Nuxt.js framework to retrieve and display data from the official website of the game. The author recommends resources for further understanding the development process and provides links to the small program and the web crawler on GitHub.</p>


<h2>Overview</h2>
<p>After a long desire to leverage my technical skills for personal projects, I've finally embarked on a small blog reconstruction journey. Spanning over two months (with a few well-placed excuses about a busy work schedule), I am thrilled to announce the launch of my revamped blog. The goal was to enhance both the visual appeal and interactive experience of the blog, and it's now live for everyone to explore.</p>
<p>The blog combines modern technologies to create a solid platform for content sharing. I aimed for an engaging user experience, and I believe the results speak for themselves. With several features that streamline the interaction and presentation, there's much to look forward to.</p>
<h2>Features</h2>
<ul>
<li><strong>Modern Technology Stack</strong>: Built using Vue, Vuex, Vue Router, Nuxt, React, Redux, and Ant Design, ensuring a robust and dynamic user experience.</li>
<li><strong>Dynamic Content Loading</strong>: Utilizes token control for on-demand loading, enhancing performance and responsiveness.</li>
<li><strong>SSR Capabilities</strong>: Server-side rendering (SSR) support for better SEO and faster loading times, leveraging server capabilities intelligently.</li>
<li><strong>JWT Authentication</strong>: Implements JWT for secure user authentication, safeguarding user data and interactions.</li>
<li><strong>Automated Deployment</strong>: Uses PM2 for automated deployment, ensuring smooth updates and server management.</li>
<li><strong>Comment and Feedback System</strong>: Users can leave comments and feedback, fostering community engagement and interaction.</li>
<li><strong>Email Notifications</strong>: Features email notifications for various activities on the blog, keeping users informed and connected.</li>
<li><strong>Future Enhancements</strong>: Plans for music visualization, mobile adaptation, and data visualization statistics, highlighting commitment to continuous improvement.</li>
</ul>


<h2>Overview</h2>
<p>The Vue ImageView component is a fantastic addition for developers looking to enhance their Vue 3 applications with image preview capabilities. It provides a simple way to manage and display images while allowing for user interactions like picking and previewing images seamlessly. This makes it an ideal choice for applications that require image handling and user-friendly interfaces, such as galleries or product listings.</p>
<p>When integrated into your Vue 3 project, the Vue ImageView component streamlines the process of displaying images from an array, ensuring a responsive and visually appealing experience. Its lightweight nature and straightforward usage patterns can significantly improve user engagement with your application.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Visibility Control:</strong> The component allows you to easily show or hide the image picker, giving you full control over when users can view images.</p>
</li>
<li>
<p><strong>Flexible Image Handling:</strong> You can pass an array of image sources directly into the component, making it simple to manage multiple images efficiently.</p>
</li>
<li>
<p><strong>Current Image Display:</strong> The component allows you to specify a single image link to show as the current image being viewed, enhancing user focus.</p>
</li>
<li>
<p><strong>Type-Safe Properties:</strong> Each property has a defined type, ensuring that you provide the correct data format and minimizing the potential for errors in your application.</p>
</li>
<li>
<p><strong>Lightweight Design:</strong> The component adds minimal overhead to your application, keeping performance smooth while providing rich functionality.</p>
</li>
<li>
<p><strong>Easy Integration:</strong> Its installation via npm is straightforward, making it easy for developers to add this functionality to their projects without extensive setup.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>The vue-picker component is a versatile solution that includes common pickers such as regular selection, linked selection, and Chinese address selection. It is compatible with both PC and mobile devices, making it a powerful picker that can be easily configured to suit different needs.</p>
<h2>Features:</h2>
<ul>
<li><strong>Compatible</strong>: Works on both PC and mobile devices.</li>
<li><strong>Versatile Selection</strong>: Includes options for regular selection, linked selection, and Chinese address selection.</li>
<li><strong>Easy Configuration</strong>: Simple setup using attribute parameters.</li>
<li><strong>Customizable</strong>: Allows customization of various parameters such as the number of columns, default index, text for buttons, and more.</li>
</ul>
<h2>Summary:</h2>
<p>The vue-picker component offers a convenient solution for implementing various types of pickers in web applications. With its compatibility across different devices and easy configuration options, it provides a seamless experience for users. Install the theme using npm or yarn, and explore the different customization options available for creating a powerful picker component.</p>


<h2>Overview</h2>
<p>The vue-table2 component for Vue 2.0 is a powerful solution for those needing a customizable table for their applications. This component is designed to meet various business needs by allowing developers to create a generic table that aligns with their vision. Features such as fixed headers, pagination, selection options, and row count limitations make it a versatile tool for efficiently managing and displaying data.</p>
<p>In this beginner-friendly guide, I'll take you through the key features of the vue-table2 component and how it can enhance your user interface when working with data tables.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Fixed Headers:</strong> Keeps the table headers visible as users scroll through data, allowing for easy reference to column titles.</p>
</li>
<li>
<p><strong>Customizable Columns:</strong> Allows for flexible configuration of columns, including setting titles, keys, widths, alignment, and text overflow settings.</p>
</li>
<li>
<p><strong>Pagination Support:</strong> Enables splitting data into manageable pages, improving readability and navigation through large datasets.</p>
</li>
<li>
<p><strong>Selection Option:</strong> Provides an option to display a left-side selection checkbox for efficient multi-row selection.</p>
</li>
<li>
<p><strong>Dynamic Height Settings:</strong> Offers control over header and cell heights, enabling tailored table presentations to fit various layouts.</p>
</li>
<li>
<p><strong>Scroll Management:</strong> Features a scroll height setting for a defined viewing area, ensuring users can navigate large datasets smoothly while maintaining context.</p>
</li>
<li>
<p><strong>Event Handling:</strong> Supports various events such as row clicks and page changes, allowing developers to trigger specific actions in response to user interactions.</p>
</li>
<li>
<p><strong>Slots for Custom Templates:</strong> Provides the flexibility to use custom templates for certain operations, making it easier to design complex UIs with specific requirements.</p>
</li>
</ul>


Naihe138

HeroStory

Naice Blog

Vue Imageview

Vue Picker

Vue Table