Table of Contents
- 0. Effect demonstration
- 1. Build a Vue3 project
-
- 1.1 vite scaffolding to create a Vue3 project
- 1.2 Setting file aliases
- 1.3 Install and configure element-plus
- 1.4 Install and configure routing
- 2. Login Page
- 3. Backstage management page
-
- 3.1 Build the backend framework
- 3.2 Left Menu Bar
- 3.3 Header User Information
- 3.4 Main content
- 3.5 footer
- 4. Configure static routing
- 5. Record activation menu
-
- 5.1 el-menu binds the default-active attribute
- 5.2 Add click event to menu
- 5.3 Initialize the activation menu
- 6. Dynamic Routing
-
- 6.1 Login successfully and store data
- 6.2 Routing Navigation Guard Dynamically Configure Routing
- 6.3 Solve the problem of page blank after refreshing the page
- 7. Complete code
Main steps:
0. Effect demonstration
1. Build a Vue3 project
1.1 vite scaffolding to create a Vue3 project
npm create vite@latest vue3-zhifou -- --template vue
Enter the newly created project folder in the code editor
#安装依赖
npm