。。。。。。

1.创建项目

1.1 安装创建 Vue 项目和配置

# vue-element-admin 中文文档
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
 
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
 
# 进入项目目录
cd vue-element-admin
 
# 安装依赖
npm install
 
# 建议不要用 cnpm 安装 会有各种诡异的 bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
 
# 本地开发 启动项目
npm run dev

1.2 配置开发工具和高效代码块

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 创建路由菜单和页面

src/views/course/文件夹下创建组件

<template>
  <div>音频/专栏/图文/视频</div>
</template>
 
<script>
export default {
  name: '',
  data() {
    return {}
  }
}
 
</script>
<style lang="scss" scoped>
</style>

src/router/index.js进行对应动态权限的路由配置

export const asyncRoutes = [
  {
    
    path: '/course',
    component: Layout,
    redirect: 'course/media',
    name: 'Course',
    meta: {
    
      title: '课程',
      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: '图文'
        }
      },
      {
    
        // hidden: true,
        path: 'audio',
        component: () => import('@/views/course/audio'),
        name: 'Audio',
        meta: {
    
          title: '音频'
        }
      },
      {
    
        path: 'video',
        component: () => import('@/views/course/video'),
        name: 'Video',
        meta: {
    
          title: '视频'
        }
      },
      {
    
        path: 'column',
        component: () => import('@/views/course/column'),
        name: 'Column',
        meta: {
    
          title: '专栏'
        }
      }
    ]
  },

src/styles/variabels.scss下找到$sideBarWidth进行侧边栏长度修改

2.课程模块开发

2.1 图文列表页开发

给.vue 文件添加 html 代码提示

2.2 新增 api 和 mock 使用

2.3 删除图文功能

2.4 新增图文功能

2.5 完善图文管理细节

2.6 音频列表管理功能

2.7 音频新增编辑功能

2.8 管理视频功能开发

3.用户模块开发

4.交易模块开发