Build a front-end development project from scratch based on Vite, Typescript, React, react-router-dom, Redux, Reduxjs/toolkit, and Ant Design
vite project initialization
Native environment
- node v16.14.2
- npm 8.5.0
- yarn 1.22.18
vite project initialization
yarn create vite
Follow the steps to enter the project name, select React for the framework, and use TypeScript for js to create a simple scaffolding project.
Run the project
Follow the prompts and use yarn to install dependent packages, and then run the project using yarn dev.
Introduction to project default package structure
-
node_modules: dependency package storage location
-
public: stores static resources. The resources in this directory can be directly accessed through the / root path during development, and will be completely copied to the root directory of the target directory during packaging. Resources stored in the public generally meet the following conditions:
- Will not be referenced by source code (such as robots.txt)
- I don’t want to import the resource at all, I just want to get its URL.
- Resources in public should not be referenced by JavaScript files.
- Resources imported into public should always use the root absolute path – for example, public/icon.png should be referenced as /icon.png in the source code.
-
src: stores project source code files and resources
-
src/assets If the static resources are placed in the src/assets directory, they will be packaged by vite, including compression, renaming, etc.
-
.eslintrc.cjs: eslint check rule configuration
-
.gitignore: git ignores file configuration
-
index.html: The entry file of the Vite project.
Official explanation: Vite treats index.html as part of the source code and module diagram. Vite parses