figure

Let’s share some of the tricks we played along the way

  1. The problem with this whole route configuration process is that manual input also does permission checks to determine whether to jump to the next step, but the created() lifecycle is a joke, where you just jump to router.push() and whatever you type in the address bar is just a refresh.
  2. Tag bar logic according to the operation requirements of colorful changes, here to play for a long time, (right-click batch operation, more tag can be moved left and right, the sidebar can also select the tag, tag selected can also respond to the sidebar, select the tag will conduct position judgment to ensure that the selected tag will not be visible, close the tag back can be re-created, Tags can also be created by entering routes within permission.
  3. Going from 0-1 takes time to support, not practice.

Project link

Click here to

goals

| | system management container sidebar | navbar | the tagbar | mainCopy the code

Dependent UI libraries

ElementUi-Plus

Components that might be used

  • NavMenu
  • Popover
  • Tag
  • Icon
  • Button

Project Directory building

Project | - node_modules | - public | - the favicon. Ico | - index. HTML | - SRC// the main directory @ stands for SRC
   |-assets   // Static resources
   |-components // Public components
   |-router 
       |-index.ts // Route registration
   |-store
       |-modules // Set of vuex model objects
           |-tag.ts
           |-permission.ts
           |-user.ts
       |-getter.ts
       |-index.ts // State management exposes the interface
   |-style // Style directory
   |-utils // Tools directory
       |-cookie.ts
       |-request.ts
   |-views // Page management
       |-index
           |-Navbar
               |-Index.vue
           |-NavMenu
               |-Index.vue
           |-Index.vue
           ...
           // Write your own pages for presentation
   |-App.vue // Container page
   |-main.ts // Import file
   |-shims-vue.d.ts // ts third party registration
|-.browserslistrc
|-.env.development
|-.env.production
|-.env.test
|-.gitattributes
|-.gitignore
|-babel.config.js
|-package-lock.json
|-package.json
|-README.md
|-tsconfig.json
|-vue.config.js
|-yarn.lock

Copy the code

Page set up

Build UI: Copyvue-element-admin

Set up thinking

| UI selection via elementui-Plus | Routes obtained by permissions are stored in VUEX for management | Tag bar is also stored in VUex for management, Deposit types obtained by routing | vuex routing management navigation bar | vuex tag management | tag column according to the personal aesthetic beauty and fluency on page optimizationCopy the code