<>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 .
Technology