README.md · WuCode/课堂教辅点名系统

# 教辅系统前端——静态页面

#### 一、起步

安装Node.js，配置好环境变量，nodejs自带npm；下载脚手架vue-cli，创建vue项目`vue create [项目名]`

选择框架版本，Vue2 or Vue3，等待完成后`cd ./[项目名]`，里面会有package.json文件，接着`npm install`，下载依赖，项目就创建成功了；VSCode编辑器可以安装一个Vuter插件

打开main.js，会发现`import App from './App.vue'`爆红，但不影响项目运行启动，看着不舒服

新建并配置一下jsconfig.json，即可解决

~~~json
//jsconfig.json
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}
~~~

#### 二、[element-ui](https://element.eleme.cn/#/zh-CN/component/quickstart)

先安装依赖`npm i element-ui -S` 生产环境要用到的依赖

安装 babel-plugin-component，`npm i babel-plugin-component -D` 开发环境要用到的依赖；使得项目只引入需要的组件，以达到减小项目体积

接着修改babel.config.js文件

~~~js
//官网
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
~~~

在创建Vue项目回生产babel.config.js文件，将plugins配置添加进去，presets就添加后会报错

~~~js
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}
~~~

根据文档按需引入，main.js入口文件

~~~js
import { Dialog } from 'element-ui';
Vue.use(Dialog);
~~~

#### 三、选择框样式组件

重构下拉选框样式，在Select元素的同层级上通过DOM生产新的元素，并使用预先定义好的类进行装饰

> 问题一

在Mounted调用初始化Select时，通过JS Dom操作动态生成的元素节点添加进页面其Css样式不生效

> 原因 + 解决办法

通过百度，因为vue文件中的style标签添加了scoped的原因，其作用时为了保证Css样式只对当前vue文件生效，但由于其他vue文件中也可能会出现同名class导致css样式冲突，于是vue就采用了添加随机后缀方式防止class名重复的样式出现导致覆盖的情况

**将style标签的scoped去掉即可**

> 注意

当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名，否则可能会出现样式覆盖的情况，不过只是一个vue文件(组件)干掉scoped是不会出现样式覆盖的，因为其他的组件可以避免样式覆盖

#### 四、3D效果

以往页面的变换多为2D的平面视角实现元素，X、Y轴的移动，旋转，放大缩小，倾斜

CSS3在2D转换的平面中引入了Z轴，形成三维坐标系，允许使用3D转换来对元素进行格式化

Z轴：垂直屏幕，往外面是正值，往里是负值

| 属性                                                         | 描述                             |
| ------------------------------------------------------------ | -------------------------------- |
| transform                                                    | 使得元素向2D或3D转换             |
| transform-origin                                             | 改变转换元素的位置（改变基点）   |
| transform-style                                              | 规定被嵌套元素如何在3D空间中显示 |
| [perspective](https://blog.csdn.net/cddcj/article/details/52956540) | 规定3D元素的透视效果             |

主菜单页面效果利用perspective使得元素看起来有倾斜感

#### 五、三个界面

##### 1、班级管理

![image-20220508140938651](https://gitee.com/wickley/teacherpartner/raw/front-end/static/img.README/image-20220508140938651.png)

添加班级按钮为sticky定位，高度动态变化，会保持按钮一直在底部；此时btn容器与item同级

用absolute也可以，但会麻烦要把list抱在一个容器与btn同级，同时给list想定高度开启滚动

##### 2、上课界面

![image-20220508142257527](https://gitee.com/wickley/teacherpartner/raw/front-end/static/img.README/image-20220508142257527.png)

![image-20220508142314317](https://gitee.com/wickley/teacherpartner/raw/front-end/static/img.README/image-20220508142314317.png)

banner点击时，默认内容向上滚动，同时白板向下滚动展出，需要Dom操作，通过修改添加类；有三个，所以抽成一个模块，使用ref，父组件通过slot插入`<template v-slot:xxxname>`，不要有空格`<template v-slot: xxxname>`，会报错找不到

##### 3、课堂记录

![image-20220508152026362](https://gitee.com/wickley/teacherpartner/raw/front-end/static/img.README/image-20220508152026362.png)

![image-20220508152045885](https://gitee.com/wickley/teacherpartner/raw/front-end/static/img.README/image-20220508152045885.png)

在使用echarts时，由于较多，提取为组件；当没有给定其明确的宽高，和在通过v-show来回切换显示时，会不显示；可以通过触发charts实例对象调用resize()解决；原本想用的手动触发窗口resize事件使其触发，但没实现；所以最后为其容器设置了明确宽高

WuCode/课堂教辅点名系统

简介

发行版

贡献者

近期动态

WuCode/课堂教辅点名系统 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

WuCode/课堂教辅点名系统