Uni App Vue3 Template
Uni-app + Vue3 + TS 基础项目
Overview
This article provides an overview and guide for setting up a uni-app-vue3-template project. The author explains the background of their personal use case and the technologies used in the project. They also provide step-by-step instructions for installing and configuring various dependencies such as eslint, prettier, typescript, sass, and axios. The article concludes with some development practices and caveats to be aware of when using Vue3 Composition API in Uni-app.
Features
- Project setup using npm package management and VSCode plugins for a better development experience
- Integration of eslint and prettier for automatic code formatting
- Configuration of typescript and allowing the default "any" type
- Installation and usage of SASS with global variables and auto-importing
- Integration of axios for API layer and adaptation to different mini-program platforms
- Usage of Vue3 composition API and lifecycle functions in Uni-app
- Custom styling using customClass prop instead of the class attribute
- Handling of event emissions, props, refs, reactive variables, computed properties, and watched variables in composition API
Summary
The article explains the process of setting up a uni-app-vue3-template project and provides guidance on the installation and configuration of various dependencies. It covers topics such as eslint, prettier, typescript, sass, axios, and Vue3 composition API in Uni-app. The author also shares some development practices and caveats to be aware of. Overall, the article serves as a helpful resource for developers looking to set up and work with uni-app-vue3-template projects.
- 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.
- 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.