cklwblovecklwblove
125

Vue Cli3 Template

screenshot of Vue Cli3 Template
vue
less

:tada: 基于 vue-cli 搭建的前端模板

Github

Overview

This article is an analysis of a product called Gitpod ready-to-codevue-cli3-template. The product is a front-end template based on vue-cli3 and is continuously updated. The article provides an extensive list of features and installation instructions for the template.

Features

  • CSS preprocessor: less
  • Ajax: axios with some encapsulation
  • SVG sprites: vue-svgicon
  • Mobile web adaptation solution: postcss-pxtorem and lib-flexible
  • Common JS utility classes: cloud-utils
  • Global injection of relevant less files using style-resources-loader, such as common variables and mixins
  • Collection of common Less mixins: magicless
  • Support for automatically generating components and views based on npm scripts
  • Support for online compression of .jpg or .png format images using TinyPNG node.js API, and conversion to Webp format files
  • Support for offline handling
  • Support for automatically uploading compiled files to a specified server in webpack watch mode, with the entry page URL and QR code printed in the terminal
  • Incremental compilation and upload of changed files
  • Support for skeleton screens
  • Display of entry page URL and QR code in the terminal in development mode, requiring Wi-Fi hotspot, and both phone and PC devices must be on the same LAN
  • Integration of plop script for generating view or component templates
  • Automatic generation of vue-router routes based on the views path, with hot updating support
  • Support for PWA
  • Use of vue-cli-plugin-dll for faster compilation, currently using CDN for production environment acceleration
  • Removal of console.log
  • Usage examples for webp image optimization technology
  • Pre-rendering feature
  • Directory overview
  • Link to official documentation
  • Configuration of webpack-bundle-analyzer plugin with Vue CLI 3
  • License: MIT
  • FOSSA Status: [status not mentioned]

Summary

The Gitpod ready-to-codevue-cli3-template is a front-end template based on vue-cli3 with numerous features such as CSS preprocessor support, encapsulated Ajax library, SVG sprites, mobile web adaptation, common JS utility classes, and more. It also offers various automation features including automatic file upload to a server, generation of components and views, and automatic generation of vue-router routes. The template has additional features like support for PWA, console.log removal, usage examples for webp image optimization, and pre-rendering. Overall, it provides a comprehensive solution for front-end development using Vue.

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.

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

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.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.