Vue Templates Logo Vue Templates
Uni App Vue3 Template screenshot

Uni App Vue3 Template

Author Avatar Theme by Akai007
Updated: 5 Apr 2023
47 Stars

Uni-app + Vue3 + TS 基础项目

Github

Categories

Vite Scss

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

Installation

  1. Install uni-app using npm: npm install -g @vue/cli and vue create -p dcloudio/uni-preset-vue my-project.
  2. Install eslint and prettier packages: npm install eslint prettier --save-dev.
  3. Set up eslint configuration file: create .eslintrc.js and add necessary configurations.
  4. Set up prettier configuration file: create .prettierrc.js and add necessary configurations.
  5. Install VSCode plugins for Prettier and ESLint.
  6. Test code auto-formatting by adding spaces and saving the file to check if it is automatically formatted.
  7. Configure TypeScript by creating tsconfig.json file and allowing default “any” type.
  8. Install sass-related packages using npm: npm install sass sass-loader --save-dev.
  9. Configure global variables and auto-importing of new global style variables in src/style/var.scss file.
  10. Configure auto-importing in vite.config.js file.
  11. Install VSCode plugin for SCSS IntelliSense.

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.