Vue Starter
基于 ` Vue 3 + TypeScript + Vite` ，及众多开源整合，构建 `Vue` 开发脚手架。帮助你进行 `Vue` 项目开发。使用 `Vitest` 进行单元测试。
Overview
The Vue Starteraction is a Vue development scaffold built using Vue3, TypeScript, and Vite. It aims to provide a streamlined and efficient environment for Vue project development.
Features
- Typescript Support: The Vue Starteraction includes support for TypeScript, allowing developers to write type-safe code.
- CSS Preprocessing: Developers can choose between using less, sass, or stylus for CSS preprocessing in their Vue projects.
- WindiCSS: The Vue Starteraction integrates WindiCSS, a utility-first CSS framework, facilitating rapid UI development.
- Locale Internationalization: The scaffold supports creating multi-language applications using locale internationalization.
- Plop: With Plop, developers can define and generate commonly used script commands for their Vue projects.
- Eslint Support: The Vue Starteraction includes eslint support to ensure code quality and conformity to coding standards.
- Lint Staged Hook: Lint Staged Hook is utilized to run localized linting on staged files to prevent error propagation throughout the project.
- Pinia State Management: The scaffold employs Pinia for state management, enabling efficient state handling in Vue applications.
- Custom Permission Directives: Developers can use custom permission directives to control routes based on user permissions in their Vue projects.
- Axios for API Requests: The Vue Starteraction utilizes Axios for making HTTP API requests in Vue applications.
- JSX Syntax Support: JSX syntax is supported, allowing developers to utilize JSX in their Vue projects.
- Animite.css Integration: The scaffold incorporates the Animite.css library for adding stylish animations to Vue components.
- Vue Router with Code-based Route Control: The Vue Starteraction utilizes Vue Router to implement a route control system that can be customized based on user permissions.
- Page Caching with keepAlive: The scaffold includes support for page caching using the keepAlive component, improving performance by reusing cached pages.
- Unit Testing with Vitest: Developers can use Vitest, a testing framework, for writing and running unit tests in their Vue projects.
- Utils and Common Functions: The Vue Starteraction provides a set of common utility functions that can be used in Vue applications.
Summary
The Vue Starteraction is a Vue development scaffold that leverages Vue3, TypeScript, and Vite to provide an efficient and streamlined environment for Vue project development. With its extensive list of features, including support for TypeScript, CSS preprocessing, internationalization, testing, state management, and more, the Vue Starteraction aims to enhance the development process for Vue projects. By following the installation guide, developers can quickly set up the scaffold and start building their Vue applications with ease.
- 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.
- 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.
- 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.
- 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.