7-1 Vuex
Vuex – code cloud warehouse, click download
1.Vuex basics - Introduction
2. Vuex basic-initialization function
3. Vuex basis - the state
4. Vuex basis - mutations
5. Vuex foundation - actions
6. - getters vuex basis
7.1 Why modularity
7.2 Modular Simple applications
7.3 Namespaces in Modularization
8. Vuex Case – Build a dark horse headline project
Vue in Taiwan project source code warehouse, download address
9. Vuex Case - Encapsulate classification components and channel components
10.1 Design the CATEGtory and Newlist VUEX modules
10.2 Set the category array and active category in the Category module
10.3 Traversal The Class Data and Determine the Active Class
10.4 Encapsulate the call to get the class Action and activate the first class
10.5 Define the news data and encapsulate the Action to get the news
10.6 Listening activates categories to trigger the Action for obtaining news
10.7 Processing data that displays news content
7-2 Pre-project knowledge,
Element – the use of the UI
Source code repository download address
1.1 Implement the basic structure of the form
1.2 Prerequisites for form verification
1.3 Form verification rules
1.4 Customizing Verification Rules
1.5 Implementation of manual verification
2.1 There are a few things you need to know about Promises
2. The ultimate solution for asynchronous programming
7-3 Basic environment construction of the project
Weakness: be official, the volume is too big, do not suggest to take two development
Repository address: download the source code
1. Understanding and introduction of vue-element-admin
2. Some basic preparations before building the project
3. Project template startup and directory introduction
Source code download warehouse address
4.1 Project operation mechanism and code annotation -main.js
4.2 Project operation mechanism and code notes - app.vue
4.3 Project operation mechanism and code comments - Permission.js
4.4 Project operation mechanism and code annotation
4.5.6 Project operation mechanism and code annotations - SCSS - ICONS
5.1 understanding and use of SCSS processing – build a small test environment
Knowledge supplement - Switch projects to learn the use of SCSS
Source code repository download address
5.2: Understanding and using SCSS processing - basic syntax
6. Set up the remote Git repository and complete the initial commit
After learning the use of less, I switched back to the manpower project and began to continue the construction of the project
7.1 Introduction to Axios interceptors
7.2 Separate encapsulation of API modules
8. Common resource images and uniform styles
7-4 Login module
1. Set a fixed local access port and website name
2. Basic layout of the login page
3.1 Prerequisites for form verification
3.2 Verification of mobile phone number and password
3.3 About modifiers
4.1 Why does cross-domain occur
4.2 Development environment address cross agent
5. Encapsulate a separate login interface
6.1 Managing Tokens in Vuex
6.2 Encapsulating Login Actions
7.1 Differentiating the base addresses requested by AXIOS in different environments
7.2 Handling axios's response interceptor
8. The login page invokes the login Action to handle exceptions
7-5 Home page module
1.1 Flow chart of permission blocking
1.2 Flowchart conversion code
2. Left navigation style of the home page
3. Set the layout and style of the header content
4. Obtain the user information interface and token injection
5. Encapsulate actions that obtain user information and share user status
6.1 Permission Interceptor calls Action
6.2 Obtaining Merged Profile Picture Interface Data
7.1 Custom Commands
7.2 Complete the global registration of a custom directive in main.js
8. Implement the logout function
9.1 Actively Intervening in the Service logic of token processing
9.2 Flowchart conversion code
10. Passive handling of Token invalidation
7-6 Route and Page
1. Organize routing pages
2.1 Creating a page and routing file for the module
2.2 Setting routing rules for each module
3. Temporarily merge static routes and dynamic routes to form a menu on the left
4. Set the display logic of the menu on the left
7-7 Organizational Structure
1.1 Understand the organizational structure
1.2 Implement the header content of the organizational structure
1.3 Tree Components
1.4 Achieve the static organization structure of tree
2.1 Encapsulate individual tree action bar components
2.2 Apply action bar components to your organization
3.1 Encapsulate API interfaces and obtain organizational structure data
3.2 Transform array data into a tree structure
4.1 Encapsulate delete interface and register drop-down menu events
4.2 Invoke the delete interface to notify the parent component to update data
5.1 Encapsulation Added interfaces. Added the shell structure of components
5.2 Click add sub-Department to display shell component
6.1 Complete basic verification conditions for a new form
6.2 Configuring Basic Verification Rules for new Forms
6.3 User-defined Verification of Department Name and Department code
6.4 Processing PID data of header content
7. Added department functions - Department head data
8.1 If the verification succeeds, the new interface is invoked
8.2 Use sync modifier to disable the new ammo layer
8.3 Reset data and verification upon cancellation
9.1 Click Edit pop-up layer to record the current node
9.2 The parent component invokes the details method of the child component
9.3 Display control titles according to calculated properties
10.1 Encapsulate and edit interfaces to save scenarios
10.2 Verification Rules Verification in editing scenarios is supported
Vue-hr-saas In Taiwan Management Project (Part 2)