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 mockandnpm run serve:localthat 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.jswith a switch to specify which files should utilize the CDN. The file is located inconfig/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.
Installation
To install the Vue PC template, follow these steps:
Ensure that your environment meets these requirements:
- Node.js version >= 12.18.0
- npm version >= 6.14.0
Fork the template from the GitHub repository: https://github.com/PLQin/vue-pc-template
Clone the forked repository to your local machine:
git clone [repository-url]Navigate to the project directory:
cd vue-pc-templateInstall the project dependencies:
npm installStart the development server:
npm run serve
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.