Vue Pc Template

screenshot of Vue Pc Template
vue
scss

vue web template and base. With basic pages, examples, and complete configuration, you can use it immediately after fork. If it helps you, give me a star。

Overview

This product is a Vue PC template with basic pages, examples, and convenient configurations. It is a ready-to-use template that can be forked from GitHub. The template includes features such as mock running commands, mobile adaptation routing cache, built-in decorators, gzip code compression, secondary encapsulation of Axios, date tool class, code specification and commit specification, CDN, directory structure, and documentation. The project is MIT licensed and was developed by PLQin.

Features

  • Mock Running Commands: Includes commands like npm run mock and npm run serve:local that allow for running mock data in the project.
  • Mobile Adaptation Routing Cache: This template does not support global configuration of routing cache, but suggests trying to introduce modules like vue-navigation or customizing configuration in the <router-view /> component.
  • Built-in Decorators: The template includes a small set of decorators that can be used for scenarios like debouncing, throttling, and confirmation prompts.
  • Gzip Code Compression: By configuring compression tools, the template can automatically compress static resources into gz files during the build process. This improves loading speed when the server enables gzip functionality.
  • Secondary Encapsulation of Axios: The template has secondary encapsulation of Axios and only requires adjusting the token acquisition method. The encapsulation file is located in src/utils/request.js.
  • Date Tool Class: The template utilizes the dayjs library for handling dates and times. It is lightweight and supports UTC and internationalization compared to libraries like moment.js.
  • Code Specification and Commit Specification: The template integrates eslint for code specification and suggests installing the EsLint plugin for development tools like VS Code. It also defines commit specifications to automatically validate code formatting and formatting during code submission.
  • CDN: If the project needs to use a CDN, the template provides a separate file cdn.js with a switch to specify which files should utilize the CDN. The file is located in config/cdn.js.
  • Directory Structure: The template has a comprehensive directory structure that includes separate directories for basic components and business-related components. It also provides a loading component in the base directory that can be called using this.$loading().
  • Documentation: The template includes a documentation module to provide multiple configuration options for certain features. It uses examples and documentation to facilitate easy switching between different configurations.

Summary

The Vue PC template is a ready-to-use template for Vue.js projects. It includes various features such as mock data support, mobile adaptation routing cache, built-in decorators, gzip code compression, secondary encapsulation of Axios, date tool class, code and commit specifications, CDN support, comprehensive directory structure, and documentation. The template can be easily installed by forking the GitHub repository and following the installation guide.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.