feat:更新课程页面路由，新增单个课程全局组件

.env 2.development

@@ -0,0 +1,2 @@
+NODE_ENV = 'development'
+VUE_APP_MODE = 'development'

.env 2.production

@@ -0,0 +1,2 @@
+NODE_ENV = 'production'
+VUE_APP_MODE = 'production'

babel.config 2.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'element-plus',
+        customStyleName: (name) => {
+          return `element-plus/lib/theme-chalk/${name}.css`;
+        }
+      }
+    ]
+  ],
+  presets: ['@vue/cli-plugin-babel/preset']
+};

src/App 2.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view/>
+</template>

src/components/CourseItem.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="courseItem">
+    <div class="image">
+      <img src="../assets/courseItem.png">
+    </div>
+    <div class="info">
+      <div class="name">
+        <span class="courseName">软件工程与计算</span>
+        <span class="courseStatus">未开始</span>
+      </div>
+      <div class="teacher">
+        <div class="avatar">
+          <img alt="" src="../assets/circle.png">
+        </div>
+        <div class="teacher-name">
+          <span>教师 |</span>
+          <span>刘钦</span>
+        </div>
+      </div>
+      <div class="time">
+        <div class="week">
+          <img alt="" src="../assets/miniClock.png">
+          <span class="currentWeek">进行至第二周</span>
+        </div>
+        <div class="semester">
+          2021年第二学期
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+<style scoped>
+.courseItem {
+  height: 260px;
+  width: 260px;
+  box-sizing: border-box;
+  background-color: #F8F9FB;
+  border-radius: 8px;
+}
+
+.courseItem :hover {
+  cursor: pointer;
+}
+
+.image {
+  height: 130px;
+}
+
+.image img {
+  height: 100%;
+  width: 100%;
+}
+
+.info {
+  margin-top: 4px;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  position: relative;
+  height: 120px;
+}
+
+.name {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.courseName {
+  font-size: 18px;
+}
+
+.courseStatus {
+  font-size: 14px;
+}
+
+
+.teacher {
+  width: 100%;
+  height: 24px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.avatar {
+  height: 24px;
+  width: 24px;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+}
+
+.teacher-name {
+  margin-left: 12px;
+}
+
+.time {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 40px;
+}
+
+.week {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.week img {
+  height: 14px;
+  width: 14px;
+  margin-right: 4px;
+
+}
+
+.semester {
+  font-size: 14px;
+  color: #909399;
+}
+</style>

src/global/register-element.js

@@ -1,32 +1,34 @@
-import 'element-plus/lib/theme-chalk/base.css';
+import "element-plus/lib/theme-chalk/base.css";
 import {
-    ElButton,
-    ElCheckbox,
-    ElForm,
-    ElFormItem,
-    ElInput,
-    ElLink,
-    ElRadio,
-    ElTabPane,
-    ElTabs
-} from 'element-plus';
+  ElButton,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElLink,
+  ElRadio,
+  ElTabPane,
+  ElTabs,
+  ElSelect,
+} from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
 
 const components = [
-    ElButton,
-    ElForm,
-    ElFormItem,
-    ElInput,
-    ElRadio,
-    ElTabs,
-    ElTabPane,
-    ElCheckbox,
-    ElLink
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadio,
+  ElTabs,
+  ElTabPane,
+  ElCheckbox,
+  ElLink,
+  ElSelect,
 ];
 
 export default function (app) {
-    for (const component of components) {
-        app.component(component.name, component);
-    }
+  for (const component of components) {
+    app.component(component.name, component);
+  }
 }

src/main 2.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import { globalComponentRegister } from './global';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import api from "@/api";
+
+const app = createApp(App).use(store).use(router).use(globalComponentRegister);
+app.config.globalProperties.$api = api;
+app.mount('#app');

src/router/index.js

@@ -1,52 +1,54 @@
-import { createRouter, createWebHashHistory, } from 'vue-router';
+import { createRouter, createWebHashHistory } from "vue-router";
 import PortalPage from "@/views/PortalPage/PortalPage";
+import teacher from "@/router/teacher";
 
 const routes = [
+  ...teacher,
   {
-    path: '/',
-    redirect: '/portal',
+    path: "/",
+    redirect: "/portal",
   },
   {
-    path: '/portal',
-    name: 'Portal',
+    path: "/portal",
+    name: "Portal",
     // 落地页同步加载
     component: PortalPage,
   },
   {
-    path: '/task',
-    name: 'Task',
-    component: () => import('../views/TaskPage/TaskPage.vue'),
+    path: "/task",
+    name: "Task",
+    component: () => import("../views/TaskPage/TaskPage.vue"),
   },
   {
-    path: '/home',
-    name: 'Home',
-    component: () => import('../views/HomePage/HomePage.vue'),
+    path: "/home",
+    name: "Home",
+    component: () => import("../views/HomePage/HomePage.vue"),
   },
   {
-    path: '/message',
-    name: 'Message',
-    component: () => import('../views/MessagePage/MessagePage.vue'),
+    path: "/message",
+    name: "Message",
+    component: () => import("../views/MessagePage/MessagePage.vue"),
   },
   {
-    path: '/admin',
-    name: 'Admin',
-    component: () => import('../views/AdminPage/AdminPage.vue'),
+    path: "/admin",
+    name: "Admin",
+    component: () => import("../views/AdminPage/AdminPage.vue"),
   },
   {
-    path: '/course',
-    name: 'Course',
-    component: () => import('../views/CoursePage/CoursePage.vue'),
+    path: "/course",
+    name: "Course",
+    component: () => import("../views/CoursePage/CoursePage.vue"),
   },
   {
-    path: '/test',
-    name: 'Test',
-    component: () => import('../views/TestPage/TestPage.vue'),
+    path: "/test",
+    name: "Test",
+    component: () => import("../views/TestPage/TestPage.vue"),
   },
 ];
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
-},);
+});
 
 export default router;

src/router/teacher.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    path: "/teacherHome",
+    name: "TeacherHome",
+    component: () => import("../views/TeacherPage/TeacherHome/TeacherHome.vue"),
+  },
+];

src/views/TeacherPage/TeacherHome/TeacherHome.vue

@@ -0,0 +1,37 @@
+<template>
+  <GlobalHeader/>
+  <div class="container">
+    <div class="header">
+      <span class="title">课程列表</span>
+      <div>
+        <el-select v-model="value" class="m-2" placeholder="Select">
+          <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button plain type="primary ml-16">新增课程</el-button>
+      </div>
+    </div>
+    <div class="courseList">
+      <CourseItem></CourseItem>
+    </div>
+
+
+  </div>
+
+</template>
+
+<script setup>
+import GlobalHeader from '@/components/GlobalHeader';
+import CourseItem from '@/components/CourseItem';
+
+</script>
+
+<style scoped>
+@import "style/teacherHome.css";
+
+</style>

src/views/TeacherPage/TeacherHome/style/teacherHome.css

@@ -0,0 +1,23 @@
+.container {
+    box-sizing: border-box;
+    padding: 16px 128px;
+    border: antiquewhite solid;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    height: 40px;
+    align-items: center;
+}
+
+.title {
+    color: #333333;
+    font-weight: 500;
+    font-size: 22px;
+}
+
+
+.ml-16 {
+    margin-left: 16px;
+}

vue.config 2.js

@@ -0,0 +1,34 @@
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
+const WebpackBar = require("webpackbar");
+const smp = new SpeedMeasurePlugin();
+
+module.exports = {
+  productionSourceMap: false,
+  publicPath: process.env.BASE_URL,
+  chainWebpack: config => {
+    config
+      .plugin('html')
+      .tap(args => {
+        // NOTE 确定系统正式名称
+        args[0].title = 'SEEC门户系统';
+        return args;
+      });
+  },
+  configureWebpack: smp.wrap({
+    devServer: {
+      // proxy: {
+      //   "/api": {
+      //     target: "http://127.0.0.1:8080",
+      //     changeOrigin: true,
+      //   }
+      // },
+      // port: 8000,
+    },
+    plugins: process.env.NODE_ENV === "development" ?
+      [
+        new WebpackBar(),
+        new BundleAnalyzerPlugin(),
+      ] : []
+  }),
+};