Vue2.7 Vite Cli
Vue2.7 + Vite + Less + Eslint + Stylelint + Commitlint 工程化脚手架。
Overview
Vue 2.7 has officially launched, marking what is likely the final version of the Vue 2 series. Many companies, including mine, have not yet transitioned to Vue 3, making this version particularly relevant. The new Vue 2.7 + Vite scaffolding provides an out-of-the-box template that is perfect for development, complete with comprehensive technical documentation. This setup not only serves as a ready-to-use framework but also as a valuable resource for learning the codebase.
With this template, developers can streamline their projects and leverage a variety of features that enhance productivity. Whether you're building new applications or maintaining existing ones, this scaffolding makes the process more efficient.
Features
- Eslint and Stylelint Integration: Ensures a unified development specification with automated format checks for JavaScript and CSS code.
- Husky and Lint-staged: Automatically formats code at the time of git commits, ensuring clean and error-free submissions.
- Vue Ecosystem Integration: Seamlessly combines the full Vue stack, including vue-router for routing and pinia for global state management.
- Axios for API Management: Simplifies HTTP requests with Axios encapsulation, making API interactions straightforward.
- CSS Style Handling: Offers streamlined processes for managing stylesheets within the project.
- Vite Configuration: Provides basic setup for Vite, ensuring an optimized development experience.
- Cross-Origin Resource Sharing (CORS) Configuration: Simplifies handling of CORS issues that may arise during development.
- Multiple Environment Variables: Facilitates efficient configuration management for various deployment environments.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- 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 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 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.
- Pinia
Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.
- 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.