Shulou(Shulou.com)06/03 Report--

This article mainly explains "the function introduction of the background management framework of Vue+Element", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn the "introduction to the functions of the background management framework of Vue+Element"!

Catalogue

Background Management Framework of Vue+ElementUI

Then what is ElementUI?

Vue-element-admin is a background front-end solution

Routing and configuration menu on the left

A newly developed background management system. In the framework, leaders should use AdminLTE as a set of templates. This is actually very simple, just introduce the styles and js files that should be introduced. I won't dwell on it here. Please refer to the official website: https://adminlte.io/

The effect picture is as follows:

AdminLTE this template, or very convenient. Those who are interested can figure it out for themselves. I just embedded this template into the new system, so I didn't study it any more.

AdminLTE, this is over. Let's talk about today's topic, the background management framework of Vue+ElementUI.

Background Management Framework of Vue+ElementUI

First of all, we need to understand, what is Vue? Vue official website: https://cn.vuejs.org/

The explanation of Vue on Vue's official website:

Vue (pronunciation / vju steps /, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when used in conjunction with modern tool chains and various supporting class libraries, Vue is also fully capable of driving complex single-page applications.

Then what is ElementUI?

It is said that it is a set of UI components developed by ele.me. I don't know the details. This is the Chinese official website of ElementUI: https://element.eleme.cn/.

In the official documentation, ElementUI sets out its design principles:

1. Consistent Consistency

Consistent with real life: consistent with the process and logic of real life, following the language and concepts that users are used to

Consistent in the interface: all elements and structures need to be consistent, such as design styles, icons and text, the location of elements, etc.

2. Feedback Feedback

Control feedback: users can clearly perceive their actions through interface styles and interactive effects

Page feedback: after the operation, the current state is clearly shown through the changes of the page elements.

3. Efficiency Efficiency

Simplify process: design simple and intuitive operation flow

Clear and clear: the language is clear and clear, allowing users to quickly understand and then make decisions

Help users identify: the interface is simple and straightforward, allowing users to quickly distinguish rather than recall, reducing the user's memory burden.

4. Controllable Controllability

User decision-making: users can be given operation suggestions or safety tips according to the scenario, but they cannot make decisions instead of users.

The result is controllable: the user is free to operate, including undoing, fallback and terminating the current operation.

These are all introduced on the official website.

Vue-element-admin is a background front-end solution

Since this is based on Vue+ElementUI, some front-end preparations for Vue are needed, which can be seen in the previous essay, click here

Chinese official help document https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

Vue-element-admin is a background front-end solution based on vue and element-ui implementation. It uses the latest front-end technology stack, built-in i18 internationalization solution, dynamic routing, rights verification, refines the typical business model, and provides rich functional components, which can help you quickly build enterprise-level middle and back-end product prototypes.

The positioning of this project is a background integration solution, which is not suitable for secondary development as a basic template. Because this project integrates a lot of functions that you may not need, it will cause a lot of code redundancy. If your project does not pay attention to this aspect, you can also carry out secondary development directly based on it.

Install Git and download Demo

Go to this address https://git-scm.com/download/win to download and install Git

After downloading the Git, you can pull the code from the Git

Git clone https://github.com/PanJiaChen/vue-element-admin.git

Alternatively, it is possible to download a compressed package directly on Git, https://github.com/PanJiaChen/vue-element-admin.git

When downloaded, the directory structure of the project looks like this.

Installation dependencies:

Npm install

It is recommended that you do not use cnpm installation. There are all kinds of weird bug. You can solve the problem of slow npm download speed by doing the following

Npm install-- registry= https://registry.npm.taobao.org

First of all, make sure that you have the Node.js environment installed on your computer. You can go to the official website to download it.

Local development, start the project

Vue cli 2 is npm run dev, cli 3 is npm run serve

If all the previous steps are correct, you can see the following interface:

Log in and you can see the following interface: this interface is still quite beautiful.

Routing and configuration menu on the left

What is routing? You can refer to the official explanation: https://router.vuejs.org/zh/guide/

Routing allows us to access different content through different URL. The URL can be set by ourselves, there is no such folder in the project, this function is routing.

The essence of routing is a hash value!

Routing settings in vue are divided into four steps:

Defining: defining routing components

Configuration: configure routin

Real: instantiated rout

Mounting: mounting rout

It is very simple to create a single-page application with Vue.js + Vue Router. With Vue.js, we can already compose applications by combining components, and when you want to add Vue Router, what we need to do is map components (components) to routes, and then tell Vue Router where to render them.

Routes are placed in src- > router- > index.js, and there is also a views folder for these pages.

First, we need to understand some of the configuration items that are provided when routing is configured in this project

/ / when setting true, the route will no longer appear in the sidebar, such as 401 true login, or some editing pages / edit/1hidden: true / / (default false) / / when setting noRedirect, the route cannot be clicked in breadcrumb navigation redirect: 'noRedirect'// when you have more than one route declared by children under one route, it will automatically become a nested mode-such as component page / / That child route will be displayed as the root route in the sidebar-such as the guide page / / if you want to show your root route regardless of the number of children declarations below / / you can set alwaysShow: true so that it ignores the previously defined rules and always shows the root route alwaysShow: truename: 'router-name' / / sets the name of the route Be sure to fill in or there will be all kinds of problems when using meta: {roles: ['admin',' editor'] / / set the permission to enter the route and support multiple permissions to overlay title: 'title' / / set the name of the route displayed in the sidebar and breadcrumbs icon:' svg-name' / / set the icon of the route noCache: true / / if set to true Will not be cached (default false) breadcrumb: false / / if set to false, it will not display} in breadcrumb breadcrumbs

So, we just need to add our own menu options to the corresponding location in the route.

{path: / bingle', component: Layout, redirect:'/ bingle/index', name: 'bingle', meta: {title:' BingleTestMainMenu', icon: 'example'}, children: [{path:' bingle', component: () = > import ('@ / views/dashboard/index'), name: 'bingle' Meta: {title: 'BingleSubmenu1', icon:' guide', noCache: true,affix: true}}, {path: 'bingle1', component: () = > import (' @ / views/dashboard/index'), name: 'bingle2', meta: {title:' BingleSubmenu2', icon: 'guide', noCache: true,affix: true}}]}

At this point, you can see your added menu items in the menu bar.

At this point, I believe you have a deeper understanding of the "introduction to the functions of the background management framework of Vue+Element". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.