Some time ago, the company needed to develop a background management system, the time is relatively urgent, a day or two. Think about their bit by bit to build up the possibility is not too big, just think there is no ready-made can change, found based on vue.js and iView component library ready-made background, used to change it can iView admin.

I. Introduction:

1. Iview UI Component library is a UI component library based on vue.js (by contrast, everyone knows).

2. Iview Admin reference iView Admin document introduction: IVIEW – Admin is one of the members of the IVIEW ecosystem, is a set of using the front and back end separation development mode, based on Vue back-end management system front-end solution. Iview_admin Preview iview_admin document iview_admin Github address

Two, use:

1. Directory Structure:


The original project cloned from Github is one such structure.

Config/(Project development configuration file, mainly used to distinguish development environment from production environment)




Node_modules/(project dependency)

Public/(store main entry file index.html)




SRC/(resource file, there is more in it)




Another important file is in the root directory: vue.config.js

This is the vue configuration file, which is different from vue CLI2.x, vue CLI3 is used here, all webpack configuration is configured here.

Other files and folders are not available for general use.


2. config/

There are two files under the config/ folder:

env.js

export default 'development'
Copy the code

url.js

import env from './env'
const DEV_URL = 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/'const PRO_URL = 'https://produce.com'
export default env === 'development' ? DEV_URL : PRO_URLCopy the code

This is the base URL of the request interface used to distinguish the development environment from the online environment.


3. public/

There is only one file under the public/ folder, which is the entry file for the output of the index. HTML content.


4. src/ 

4-1. src/api/



Data. js is the function for all data requests, phones. js is the routing request function, and user.js is the request method for user login, obtaining user information, and logging out. In iView admin, all request methods are grouped together, where they need to be called again, rather than scattered in various pages, which facilitates maintenance and modification.

For example in user.js:



4-2. src/assets/



SRC /assets/ stores static resources such as images.

4-3. src/components/



SRC /components/ here are some of the components that iView Admin has wrapped that can be called directly.

4-4. SRC /config/ in-project configuration file, which already contains the cookie storage duration and whether to use internationalized configuration.

4-5. SRC /directive/ All project custom directives

4-6. src/libs/ 



In axios.js, the iview_admin author wraps the request method:

This is intercepting the response, so if you don’t specify a return code field for a successful request or if you want to return code:200 for a successful request then you can use the request and even if you see a successful request on console Network, you will print false, Or in accordance with his agreement with the background, or change the source code.

Tools. js and util.js are both utility functions.

SRC /locale/ stores the internationalization configuration file. If you do not use internationalization, you do not need to worry about it.

SRC /mock/ mock data. In the absence of a real development environment, cloned projects use mock data.

4-9. SRC /router/ routers. Js Routing configuration file, you need to pay attention to the user permission configuration here:

Such as:



The user’s permission configuration must be an array.

4-10. SRC/Store/Here is the place to manage the state of the whole project. Vuex state management tool is used.

4-11. SRC /view/ Inside is the presentation page we will write.



Summary: a little superficial experience, what is wrong please point out. Iview Admin is a vUe-based back-end management system front-end framework, really realize the separation of the front and back end, skilled use of VUE students will be easy to get started, high development efficiency.