preface
See article yesterday when I saw an article about using the vue – cli build vue of infrastructure projects, and then download the looked at his launch, feel the whole interface is quite good, quite simple, internal code logic nor anything too complicated, for junior partner needs new project development from scratch, You can borrow it or download it directly. This project mainly for the tabs and the interaction between the menu bar this made some optimization, because itself only supports the secondary menu templates, and project background generally submenus may arise, four basic does not have a menu, so for this situation, it optimized the logic itself, provide the mapping of submenus. Then a keep-alive process is performed, which is very simple and will not be mentioned
The body of the
Put a link to the original article first
www.cnblogs.com/gaosong-shu…
Then place the optimized project address
Github.com/hejiyun/vue… git clone [email protected]:hejiyun/vue-element-model.git
In a nutshell, this template has complete basic functions. When using this template for development,
1. Joint investigation
In the proxyTable of index.js in the config directory, configure the IP address of the port. PathRewrite indicates setting the path matching rule
2. Configure the axiOS request
Config under SRC is the configuration for axios to create the object
3. Router Definition — Menu bar
The first level of definition is home, meaning that the content components of the body are nested inside the home, keeping the sidebar and the top bar
If you need a secondary menu
If you need to set the three-level menu
When setting a level 3 directory, note that the components corresponding to the level 2 directory need to be nested with router-View again
4. Associated mapping between menu bar and TAB TAB and route hop.
** This part does not need to be done, it already has, mainly through the watch listening to get the corresponding jump route matching the default menu bar activePath**
5. Permission routing and project sorting
Basically, this template can be used to directly develop component pages. There is a lot of variability in permissions. Anyway, it is just one idea: add role attribute to meta meta information through re-routing, filter out pages that can be displayed through the corresponding field of role attribute, and then you are done. The hidden property of the route itself also hides the corresponding menu
conclusion
Ok, this is what a vue seems pretty simple and beautiful project template, mainly on the menu bar map made an optimization, and simply introduces the function point, use scaffolding, basically has nothing to repeat, baidu on a lot of, don’t fine said, finally, I wish you all a happy every day, more and more good!