Vue Template
基于vue-cli二次封装的移动端框架，vue3 +vue-cli5 + webpack5 + 多入口打包 + 自动生成项目模版 + pinia + 数据持久化 + 路由动画 + axios二次封装 + less sass 变量函数处理 + viewport 适配方案等等
Overview:
This project is a secondary encapsulation of Vue-cli framework based on pnpm, Vue-cli 4.x, and Webpack 5. It mainly encapsulates multiple entry point packaging, automatic generation of project templates, pinia, data persistence, route animation, axios secondary encapsulation, less sass variable function handling, viewport adaptation solution, and many other main features. For more details, please refer to the project documentation.
Features:
- Using pnpm package management
- Multiple entry point packaging
- Automatic generation of project templates
- Pinia state management library
- Encapsulation of persistent storage plugin
- Encapsulation of route animation
- Introducing Nprogress
- Support for history mode
- Secondary encapsulation of axios
- Viewport adaptation solution
- Handling of less sass variables and functions
- Configuration of multiple environment variables
- Integration of vconsole.js
- Chained operator support
- Entrance loading animation
- Eslint + prettier + husky + commitlint standardization
- Planned features:
- History route configuration
- Unified format control management applicable to WebStorm and VSCode
- Selective compilation of individual entry files in the case of multiple entry points
- CLI-like project that can be downloaded with a single command
- Common basic methods library packaging
- Building a component library using Vite
Summary:
This project is a secondary encapsulation of the Vue-cli framework, with features such as multiple entry point packaging, automatic generation of project templates, pinia state management, data persistence, route animation, and axios secondary encapsulation. It also includes handling of less sass variables and functions, viewport adaptation, and configuration of multiple environment variables. The project aims to improve development efficiency and provide a standardized development environment. Planned features include history route configuration, unified format control management, and CLI-like project setup.
- 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.
- 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.
- 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.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
- 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.