vue-element-admin

Introduce a.

Vue-element-admin is a background system community solution based on VUE technology stack. It is a relatively complete front-end solution for developing background management system, which can quickly build enterprise-level background product prototype

  • Based on VUE and Element-UI implementation
  • Built-in I18 internationalization solution, dynamic routing, authorization verification
  • A typical business model is refined
  • Provides a wealth of functional components
  • Internal integration of many PC project business scenarios and functions

Website address: https://panjiachen.gitee.io/vue-element-admin-site/zh/

The online demo address: https://panjiachen.github.io/vue-element-admin/#/dashboard

Run locally

1. Pull the project code

/ / git clone https://github.com/panjiachen/vue-element-admin.git # on the pull out code
$ git clone https://gitee.com/mirrors/vue-element-admin.git # pull from code cloud$NPM run dev = $NPM run dev = $NPM run dev = $NPM run devCopy the code

2. The problem of slow download is solved

2.1 Git Clone speed is too slow or errors are reported

You can directly download the code to run the zip package: gitee.com/mirrors/vue…

2.2 Dependency installation is slow

Can use taobao mirror: NPM config set registry at https://registry.npm.taobao.org

If you use YARN to download the installation package, use YARN all the time. Do not use yarn together with NPM

3. Summary

Vue-element-admin has most of the solutions built into the background management business scenario, which can be seen in the navigation bar on the left. These schemes are not needed by every project, and can be used for reference if we need them in our actual business. Therefore, they play more of a reference value than suitable for direct use for secondary development

vue-admin-template

The official document: https://github.com/PanJiaChen/vue-admin-template

Vue-element-admin is a very comprehensive system that provides a lot of ready-made solutions that we can refer to when writing projects, but also has a disadvantage: it’s not very good for secondary development because there are so many things to cut.

We can take another subsystem, called vue-admin-template, which provides the most basic template for easy secondary development

Panjiachen.gize. IO /vue-admin-t… panjiachen.gize. IO /vue-admin-t…

1. Pull code

$ git clone https:/ / gitee.com/panjiachen/vue-admin-template.git # from yards cloud pull code$NPM run dev = $NPM run dev = $NPM run dev = $NPM run devCopy the code
  1. vue-admin-templateIs in thevue-element-adminOn the basis of a large number of cuts, only retained the background management system the most critical framework part, very suitable for us to do secondary development on this basis
  2. A large part of PC background management projects developed using VUE technology stack in the market are based onvue-admin-templateSecondary development, and our human capital projects are based on it.
  3. Clone warehouse code, the network may not be good, you can directly CV

2. Create a local project and associate it with the remote repository

Make the vue-admin-template project our own and associate it with a remote repository for management

2.1 Local Project Initialization

Because the project we downloaded before is directly cloned from vue-admin-template **, which has the submission record of the original project, in order to avoid conflicts, we need to delete the previous submission before initialization.

There are three steps:

  1. Delete the **.git** folder under vue-admin-template (this folder is hidden by default, if you can’t see it, you need to set it to show hidden folder).

  2. Modifying project Information

    1. Rename the project folder from vue-admin-template to vue-hr(or something else)
    2. Modify the description in package.json.

  3. Git initializes the project

    $ git init  This command creates a new.git folder
$ git add . Add the changes to the staging
$ git commit -m "Human Resource project initialization" # Transfer temporary storage to local warehouse
Copy the code

After the above steps, it becomes our own project

2.2 Setting up a remote warehouse

Create an empty, public remote repository with a local name on Gitee

2.3 Push to the remote warehouse

There are two sentences of command (not memorized, there are specific hints in gitee empty warehouse)

  1. associated
$git remote add originAdd remote repository address
# git remote add origin https://gitee.com/
Copy the code
  1. Push the master branch to the remote repository
$ git push -u origin master
Push the master branch to the remote repository address represented by Origin
Copy the code

3. Know the vue-admin-template directory

Generally, after entering the company, there will be a period of time (about 1 week) to get familiar with the project

Know the directory of vue-admin-template

3.1 Understanding the directory structure

This project has generated a basic development framework that provides various functions and ready-made directories covering middle and back end development. The following is the directory structure of the whole project

├ ─ ─ the build# Build relevant├ ─ ─ the mock# project mock data that acts as an interface temporarily when the interface server is not ready├ ─ ─ the public# static resources│ ├ ─ ─ the favicon. Ico# the favicon icon│ └ ─ ─ index. HTML# HTML templates├ ─ ─ the SRC# source code│ ├ ─ ─ API# all requests│ ├ ─ ─ assetsStatic resources such as # theme fonts will not participate in the packaging directly out│ ├ ─ ─ the components# Global public component and business irrelevant upload component│ ├ ─ ─ the ICONS# Project all SVG ICONS│ ├ ─ ─ layoutResponsible for building the overall layout of the project HTML structure│ ├ ─ ─ the router# routing│ ├ ─ ─ storeVuex manages the location of data modularized development of global getters│ ├ ─ ─ styles# global style│ ├ ─ ─ utilsrequest.js│ ├ ─ ─ vendor# public vendor│ ├ ─ ─ views# Views all page routing level components│ ├ ─ ─ App. Vue# entry page root component│ ├ ─ ─ the main js# entry file load component initialization etc│ └ ─ ─ permission. Js# Permission management│ └ ─ ─ Settings. Js# config file├ ─ ─ tests# test├ ─ ─. Env. XXX# Environment variable configuration├ ─ ─ eslintignore# eslint ignores files├ ─ ─. Eslintrc. Js# esLint configuration item├ ─ ─ gitignoreGit ignores files├ ─ ─. Travis. YmlAutomate CI configuration├ ─ ─. Babel. Config. Js# Babel - loader configuration├ ─ ─ jest. Config. Js# Test configuration├ ─ ─ vue. Config. Js# vue - cli configuration├ ─ ─ postcss. Config. Js# postcss configuration└ ─ ─ package. Json# package.json
Copy the code

At this point, you may be confused because there are so many files in the generated directory, but let’s take a basic understanding:

  • SRC directory: When working on a project, focus on **src** directory, which is all the source code and resources
  • Non-src directories: These are generally configurations of the project’s environment and tools

3.2 Understanding the SRC directory

├─ SRC # Source │ ├─ API # All Request │ ├─ Assets │ ├─ Components # All SVG ICONS │ ├─ Layout # ├ │ ├─ Router # Route # │ ├─ Style # │ ├─ Utils # ├─ Vendor # Public vendor │ ├ ─ ─ views # page views all │ ├ ─ ─ App. Vue # entry page │ ├ ─ ─ main. Js file # entry Load module initialization │ └ ─ ─ permission. Js # rights management │ └ ─ ─ Settings. js # config fileCopy the code

3.3 Be familiar with the operation mechanism of the project

Overall operation mode

The key file

main.js

Main.js is the entry file for the entire project (the entry file learned in Webpack)

App.vue

App.vue is the root component

permission.js(Comment out the content first)

Permission.js is the file that controls login permissions for a page, introduced in main.js

The code here will be hard to understand without going through the build process, so comment out the code here and build from 0 to 1 when we build the permissions feature

settings.js

For some configuration of project information, there are three properties:

Title (Project name)

fixedHeader

SidebarLogo (shows the left menu logo), settings.js file will be referenced elsewhere, we don’t need to touch it

Vuex(Comment out the user.js content)

The current Vuex architecture adopts the form of modules to manage shared state, and its architecture is as follows

The app.js module and settings.js module have complete functions and do not need to be modified. The user.js module is the content we need to focus on later development, so here we delete the content in user.js and export a default configuration

store/modules/user.js

export default {
  namespaced: true.state: {},
  mutations: {},
  actions: {}}Copy the code
scss

The project also uses SCSS as an extension language for CSS. In the styles directory, you can find files related to SCSS

icons

The ICONS have the following structure