[Vue3+Ts] Project startup preparation and configuration project code specifications and css style reset

Create a project (use the Vite build tool to create a project template)

npm init vue@latest

• After creating the project, just npm install

Catalog introduction

Plug-in installation

• Take a look at the plug-ins recommended by vscode

• Install recommended plugins for better type detection
  

Create alias

Compilation instructions

project configuration

Configure icon and title

Configure project alias

Configure ts.config.json

Check whether the vscode plug-in is configured

Configure project code specifications

Integrated editorconfig configuration

• Helps maintain a consistent coding style for multiple developers working on the same project on different IDE editors
• Vscode needs to install a plug-in: EditorConfig for VS Code

prettier tool library

• A powerful code formatting tool that can also delete blank lines.
• When creating this project, you will be prompted whether to install it. If it is not installed, you can also install it by command
• 1. Installation

npm install prettier

• 2. Configuration
  
• 3. You can also configure .prettlerignore to ignore files (the above installation has been completed)
• 4. Test whether the prettler is effective, save it, and find that the blank line is not deleted
• 5. Configure a scripts in package.json (you can not use this method, the following is more convenient)
• "prettier":"prettier --write", but the operation is troublesome, and npm run prettier cannot be run all the time
• 6. Use vscode plug-in
  
• 7. Check the configuration first
  
• 8. Method 1, ctrl + p, click the following to format once
  
• 9, but if you want to set it and save it, you can format it
  
  10, it will take effect, so you can save it and optimize it according to the prettier style

ESLint detection configuration

• Used to detect irregular codes and give prompts or warnings
  
  
• To resolve the conflict between them
• This solution will be installed (if it was turned on when creating the project, there is no need to configure it here)

npm install eslint-pluugin-prettier eslint-config-prettier -D

CSS style reset

• normalize.css
• reset.css

npm install normalize.css

Steps: Inside main.ts

import 'normalize.css'

Step 1, create a new css folder

Step 2: Import index.less into main.ts

Step 3: Use it directly. If less is not recognized, import less.

• If it prompts that less cannot be found, import less.

npm install less -D

• css takes effect