Integration practice of Vue+Element background management framework

A newly developed background management system. In terms of the framework, leaders should use the AdminLTE template. This is actually very simple. Just import the required styles and js files. I won’t go into details here. You can refer to the official website: https://adminlte.io/

The effect diagram is as follows:

The AdminLTE template is very convenient. Anyone who is interested can figure it out on their own. I just embedded this template into the new system and didn't study it any further.

This concludes AdminLTE. Let’s talk about today’s topic, the background management framework of Vue+ElementUI.

Vue+ElementUI background management framework

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

Explanation of Vue on Vue's official website:

Vue (pronounced /vjuː/, 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 get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is fully capable of driving complex single-page applications.

So what is ElementUI?

I heard that it is a set of UI components developed by Ele.me. I am not sure about the details. This is the Chinese official website of ElementUI: https://element.eleme.cn/

In the official documentation, ElementUI gives its design principles:

1. Consistency

Consistent with real life: Keep consistent with the process and logic of real life, and follow the language and concepts that users are accustomed to;

Consistency in the interface: All elements and structures should be consistent, such as design style, icons and text, location of elements, etc.

2. Feedback

Control feedback: Allow users to clearly perceive their operations through interface style and interactive effects;

Page feedback: After the operation, the current status is clearly displayed through the changes of page elements.

3. Efficiency

Simplify the process: Design a simple and intuitive operation process

Clarity: The language is clear and the meaning is clear, allowing users to quickly understand and 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. Controllability

User decision-making: It can provide users with operation suggestions or safety tips based on the scenario, but it cannot make decisions on behalf of users;

Controllable results: Users can freely perform operations, including undoing, rolling back, and terminating the current operation.

These are all introduced on the official website.

vue-element-admin is a backend frontend solution

Since this is developed based on Vue+ElementUI, some front-end preparation of Vue is still needed. You can check it 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 backend front-end solution based on vue and element-ui. It uses the latest front-end technology stack, has built-in i18 internationalization solutions, dynamic routing, permission verification, refines typical business models, and provides rich functional components. It can help you quickly build enterprise-level mid- and back-end product prototypes.

This project is positioned as a backend integration solution and is not suitable as a basic template for secondary development. Because this project integrates many functions that you may not use, it will cause a lot of code redundancy. If your project does not focus on this aspect, you can also directly carry out secondary development 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 Git, you can pull the code from Git

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

Alternatively, you can download the compressed package directly from Git https://github.com/PanJiaChen/vue-element-admin.git

After downloading, the directory structure of the project looks like this

Installation dependencies:

npm install

It is recommended not to use cnpm for installation as there will be various weird bugs. You can solve the problem of slow npm download speed by doing the following:

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

First, make sure that the Node.js environment is installed on your computer. You can download it from the official website.

Local development, start the project

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

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

Log in and you can see the following interface: This interface is quite beautiful

Routing and Configuration left menu

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 URLs. This URL can be set by ourselves. There is no such folder in the project. This function is routing.

The essence of routing is hash value!

The routing settings in vue are divided into four steps:

Define: Define routing components

Configuration: Configuring Routing

Implementation: Instantiating Routes

Mount: Mount the route

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

The route is placed in src->router->index.js, and there is also a views folder, which is of course where these pages are placed~

First, we need to understand what configuration items are provided when configuring routing in this project

//When set to true, the route will not appear in the sidebar, such as 401, login, etc., or some editing pages such as /edit/1
hidden: true // (default false)

//When noRedirect is set, the route cannot be clicked in the breadcrumb navigation redirect: 'noRedirect'

//When the number of children declared under a route is more than 1, it will automatically become a nested mode--such as the component page //When there is only one child route, that child route will be displayed in the sidebar as the root route--such as the boot page //If you want to display your root route regardless of the number of children declared under the route //You can set alwaysShow: true so that it will ignore the previously defined rules and always display the root route alwaysShow: true

name: 'router-name' //Set the name of the router. Be sure to fill it in, otherwise there will be various problems when using <keep-alive> meta: {
  roles: ['admin', 'editor'] //Set the access permissions for this route, supporting multiple permissions superposition title: 'title' //Set the name of this route displayed in the sidebar and breadcrumbs icon: 'svg-name' //Set the icon of this route noCache: true //If set to true, it will not be cached by <keep-alive> (default false)
  breadcrumb: false // If set to false, it will not be displayed in the breadcrumb}

Therefore, we only need to add our own menu options to the corresponding position 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 }
      }
    ]
  },

Then you can see the menu items you added in the menu bar.

This is the end of this article about the integration practice of Vue+Element's background management framework. For more relevant Vue Element background management framework content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!