1. Construction of front-end engineering environment for online education

1.1 : vue-element-admin overview

Vue element admin is a semi-finished project based on Element ui, which has completed common functions.
- Encapsulates some unique js
- Some components are encapsulated
vue-element-admin is a background management system integration solution based on element-ui.

Function: https://panjiachen.github.io/vue-element-admin-site/zh/guide/#function

GitHub location: GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

Project Online Preview: Vue Element Admin

You can download front-end projects from GitHub and make changes to suit your project needs

1.2: Installation

Install the project after downloading from GitHub

In the front-end console: enter the project directory: cd .\vue-element-admin-master-pra\

Install dependencies
npm install

Start after installation: npm run dev

2. Optimize the details of front-end engineering

2.1: Modify the information of the front-end project (can do or not)

Find the package.json file

Modify name, description, author

2.2: Modify the port number (can do or not)

The project port number can be modified in the vue.config.js file

Three ways to modify the port number

The first default local modification:

The second type: npm configure the port number (note that there is no space around = etc.) to run at startup

npm run dev --port=8888

The third type: configure the port number in the vue runtime environment (development environment)

port=9999

2.3: Introduction to the front-end directory structure

Root directory:

.

├── build // build script

├── mock // mock data service

├── node_modules // Project dependent modules *

├── plop-templates // module generation tool

├── public // Static resource directory, after build, the content in the public directory will not be merged or compressed, but copied directly to dist

├── src //Project source code *

├── test // Test program directory

├── .env.development //Configuration file in development environment, VUE_APP_BASE_APIaccess path prefix

├── .env.production //Configuration file in production environment, VUE_APP_BASE_APIaccess path prefix

├── package.json // project information and dependency configuration *

└── vue.config.js // vue's core configuration file *

src directory

src

├── api // interface directory, send ajax code *

├── assets //Static resource directory, when building, the resources are compressed, merged and other operations.

├── components //public component directory, non-public components are maintained under their respective views

├── directive //directive directory

├── filters // filter directory

├── icons //svg icon

├── router // routing table *

├── store // store vuex *

├── styles // various styles

├── utils // public tools, non-public tools, maintained under their own views *

├── views // All pages in various layout projects are placed here

├── vendor // tools (excel, zip)

├── App.vue // Project top-level component

├── main.js // Project entry file

├── permission.js //Authentication entry

└── settings.js project content configuration file (project title)