<>vue-element-admin Background management system

Before coming to Hangzhou this year , I did not know that there is such a packaged convenient front-end direct use of the background management system , It's based on vue And element-ui Of , And it's responsive .

It's really super nice.

After coming to Hangzhou , Two e-commerce companies have been engaged in this background management system . It's said to be a stupid deployment , The back-end colleagues can also get started quickly . I have to say , I'm a real dish ……

<>PC End layout

<> Mobile terminal layout

<> How to add menu page

<> Add menu page ( Parent menu / Submenu )

Click in the menu on the left “ system management ” Button , In the drop-down menu shown , click “ Menu management ” option , Then the menu management directory will be displayed on the right side , Select the parent directory in the directory where you want to add the submenu, or enter it directly as the parent menu in the input box on the right .

I tried , Input directly on the right side , The parent directory selects the existing menu , Add submenu in this way , The result is wrong . Well , I don't know if it's my mistake . In order to ensure the correctness , The following method can be used :

* Add parent directory : Add directly in the right input box , The parent directory is empty by default .
* add subdirectory : Find the parent directory in the menu directory , Then right click Add , The parent directory is displayed automatically , Other contents can be input directly .

The content input template in the input box on the right is as follows :

What needs special attention is that : route , This path should be consistent with the new path in the code , It will be described in detail later .

<> Add assigned permissions

Click in the menu on the left “ Role management ”, Enter the role management page , Now I want to modify the permissions of the system administrator , Show the new menu , Click directly “ Authority assignment ”, eject “ Authority assignment ” page .

If you want to show the menu , You need to check , If you don't want to show the menu , Then cancel the check , Then click OK .

Now you need to exit the current user , Then log in again , Or refresh the web link directly , You can see the added page .
Next, you need to add the page path to the code .

<> Add menu page code

stay views Add the appropriate folder to the folder , For the sake of distinguishing , Naming is also important , Then add one index.vue file , be index.vue The code in the file is the code in the menu you want to add .

Next, we need to router Route to add this page .

<> How to add submenu

find router folder , Then find the corresponding modules, In the corresponding routing file , Add the contents in the red box on the right , yes path/component/name/meta etc .

<> How to add parent menu

Need to be in modules Add a route to the folder js file , Then copy the others js Modify the contents of the document , be careful router The name needs to be changed .

Then go router In folder index.js Modify the following in the document :

* Import routing file
* Register routing file

be careful :
name: The name of the corresponding configuration menu page ( It can also be different , Does not affect the page )
path: Corresponds to the path in the configuration menu page ( Current js file name +path name === route )

Configuration complete , The menu page is added successfully , Next, you can process the page content and data .