vue2 admin

vue2-admin

Experience address: vue2-admin
Account: admin Password: admin
If you encounter a bug or have a better implementation, please feel free to contact me (you can also send me an email to ask if you don’t understand the code). Email: [email protected]

vue2 version github address: vue2-admin
There is also a gitee warehouse, just change github in the link above to gitee.

---

Contains features

1. First screen loading animation
2.axios package
3.router permission control
4. Dynamically generate side navigation bar based on permissions
5. Login logic
6.dashboard page layout
8. Components based on the secondary encapsulation of el-tooltip will only display the tooltip when the length is exceeded, and support all attributes of el-tooltip. 9. Components based on the secondary encapsulation of el-table, support all attributes of el-table, and support paging. 10. Icon selection component based on el-icon secondary encapsulation 11. Token touchless refresh function

---

vue2+element+axios background template

It does not over-encapsulate functions and only provides the basic page framework and routing structure. The remaining functions are completely left to the users to develop themselves.

Introduce mocks to facilitate separate development of front-end and back-end.

About mockjs

In order to demonstrate the effect, I also used mock.js to generate test data in the formal environment. But the official version will not be used!

Please execute it in interruption during official use.

 npm uninstall mockjs --save

If you need test data during development, please execute the following instructions to install mockjs in the development environment

 npm install mockjs -D

---

Encapsulate axios

Request headers can be configured in utils/request.js and can be modified according to your actual situation.

Configure the base URL of the request in the api in utils/setting.js

The general environment is .env

The development environment is .env.development

The production environment is .env.production

Environment variable priority .env.production = .env.development > .env

There is an api folder in the project src directory, and then create a new user.js file in it. This file is the encapsulation process of writing the API.

It is recommended to put a type of interface in the same file when using it to facilitate debugging and unified management.

If the @/api/user.js format is used, it will be introduced first when using it. For example, I first introduce the file in @/component/login.vue

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
} 

---

router permission control

Dynamically generate routes based on the data returned by the interface, and generate a navigation bar based on the interface data.

There are route guards in @/router/beforEach.js. The basic route guards have been added. If you want to implement other functions (such as: you can only enter a certain page after performing a certain operation), you can add it in router/beforEach.js Add corresponding logic to the Selfexecution function.

Text generates side navigation based on route

Configure the icon, title, and hidden of the sidebar in the meta attribute in @/router/beforEach.js. When hidden:true, the side navigation bar is not displayed.

The sidebar color can be modified by aside_color and aside_rext_color of the theme in utils/setting.

---

VUEX

Put vuex modularization, login and permission control under a separate module

To prevent vuex data refresh loss, introduce vuex-persistedstate

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

In order to prevent users from manually modifying sessionstorage, a listening event is added

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 

---

button throttling

Basic button throttling code has been added, and v-preventReClick can be bound to the button.

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} ) 

---

initial include page

Login page,

Password retrieval page,

404 page,

Home page

---

Preparation for use

 npm uninstall mockjs --save

npm install mockjs -D

npm install

Start a project

 npm run serve

Project packaging

 npm run build

Code formatting

 npm run lint

docker

 docker build -t vue-admin . --no-cache