。。。。。。

1. Create project

1.1 Installation creation Vue Project and configuration

# vue-element-admin  Chinese document 
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
 
#  Cloning project 
git clone https://github.com/PanJiaChen/vue-element-admin.git
 
#  Enter project directory 
cd vue-element-admin
 
#  Installation dependency 
npm install
 
#  Not recommended  cnpm  install   There will be all kinds of weird  bug  It can be solved by the following operations  npm  The problem of slow download speed 
npm install --registry=https://registry.npm.taobao.org
 
#  Local development   Start project 
npm run dev

1.2 Configure development tools and efficient code blocks

1.2.1 Vscode

1.2.1.1 Element UI Snippets

1,2.1.2 Vue2 Snippets

IntelliJ IDEA Keybindings

JetBrains IDE Keymap

Markdown Preview Enhanced

vscode-icons

Path Intellisense

Highlight Matching Tag

Auto Rename Tag

VSCode Great Icons

indent-rainbow

---

npm Intellisense

Image preview

vscode-pigments

Parameter Hints

Quokka.js

1.3 Create routing menus and pages

src/views/course/ Create components under folder

<template>
  <div> Audio / special column / Image & Text / video </div>
</template>
 
<script>
export default {
  name: '',
  data() {
    return {}
  }
}
 
</script>
<style lang="scss" scoped>
</style>

src/router/index.js Configure the route corresponding to dynamic permissions

export const asyncRoutes = [
  {
    
    path: '/course',
    component: Layout,
    redirect: 'course/media',
    name: 'Course',
    meta: {
    
      title: ' Course ',
      icon: 'excel',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    // alwaysShow: true,
    children: [
      {
    
        path: 'media',
        component: () => import('@/views/course/media'),
        name: 'Media',
        meta: {
    
          title: ' Image & Text '
        }
      },
      {
    
        // hidden: true,
        path: 'audio',
        component: () => import('@/views/course/audio'),
        name: 'Audio',
        meta: {
    
          title: ' Audio '
        }
      },
      {
    
        path: 'video',
        component: () => import('@/views/course/video'),
        name: 'Video',
        meta: {
    
          title: ' video '
        }
      },
      {
    
        path: 'column',
        component: () => import('@/views/course/column'),
        name: 'Column',
        meta: {
    
          title: ' special column '
        }
      }
    ]
  },

src/styles/variabels.scss Find below $sideBarWidth Modify the length of the sidebar

2. Course module development

2.1 Graphic list page development

to .vue File to add html Code hinting

2.2 newly added api and mock Use

2.3 Delete the graphic function

2.4 New graphic function

2.5 Improve the details of graphic management

2.6 Audio list management function

2.7 New audio editing function

2.8 Manage video function development

3. User module development

4. Transaction module development