创新实训（十一）开发过程中的一些bug汇总

前言

这是对开发过程中一些比较有意义、难缠的bug的记录和总结。
修改bug查阅的文档、博客至少上百篇，也算是血泪教训了。
记录在此，一是证明自己的开发过程，二是总结汇总，避免重复的错误再犯。

1、自定义规则和绑定表单如下：

注意规则名字不要包含诸如“name”这种关键字，否则会报错

Taskform: {
    
        Task_name: "",
        Task_class: "",
        Task_minmember: 1, //最少人数，设定1-10
        Task_model: "", //模型（py文件，格式是事先规定好的，存储位置目前尚未确定） 这里前端要实现文件选取功能
        Task_premodel: true, //默认True是随机生成。预处理模型（初始模型，可选项，默认是随机生成，存储位置目前尚未确定）
        Task_dataset: "", //数据集可选（保存在训练端，不同训练端数据集独立）
      },
      rules:
        {
    
          Task_name: [
            {
    
              required: true,
              message: "请输入任务名称",
              trigger: "blur",
            },
            {
    
              min: 3,
              max: 20,
              message: "长度应该在3-20个字符之间",
              trigger: "blur",
            },
          ],
          
        },
 

2、input输入框图标不显示的问题

参考下面这个，用插槽的方式解决
elementPlus使用icon图标不显示解决方法_小黑ya_的博客-CSDN博客_element icon无法显示
Icon 图标 | Element Plus (gitee.io)
或者直接这样，prefix-icon前面不要加冒号，也可：

<el-input clearable :input-style="{ 'user-select': 'none' }" v-model="ruleForm.username" placeholder="账号" prefix-icon="Key" >
              </el-input>

3、Tailwind！这个我找了好久啊！可以实现直接在class中输入样式。

Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站。
在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档
别忘了安装以及生成和修改配置文件！
原来的模板用的是unocss，但是没有合适的文档，我就用了这个。

4、导入第三方图标库的方法

引入阿里iconfont图标方法以及注意事项_tuonioooo的博客-CSDN博客_iconfont图标

5、点击登录后只变地址页面不刷新

使用element插件点击跳转时报错form-item.vue:315 Uncaught (in promise) TypeErelForm.removeField is not a function_if时光重来的博客-CSDN博客
这里还要注意，所有的el-form-item项必须被包裹在el-form之内！不能像模板那样单独摘出来！

6、单选框这里label绑定值的类型只能是string/int，所以绑定的数据最好不要用Boolean类型，这里用01替代。

ElementUI之el-radio中label和:label的区别【避免踩坑】_urnotzkey的博客-CSDN博客_el-radio label

别忘了这里加了冒号！

<el-form-item label="初始模型" prop="Task_premodel">
              <el-radio-group v-model="Taskform.Task_premodel">
                <el-radio :label=0 @click="premodle_fromuser(false)" >随机生成</el-radio >
              <el-radio :label=1 @click="premodle_fromuser(true)" >自选</el-radio >
</el-radio-group>
 

7、组件的属性，有些绑定的时候别忘了开头加上：冒号！

8、页面跳转时的参数传递，使用params方式实现。

Vue3x路由跳转及传参(useRouter)_云飞扬扬的博客-CSDN博客_vue.use(router)

9、主题色暗黑模式引入

解决报错：Module not found: Error: Can‘t resolve ‘element-plus/lib/theme-chalk/index.css‘_敲代码的柯基的博客-CSDN博客
这里写了很久。element官方的说法也有点问题，相当于引入了一个官方写好的css文件。在index.html中引入。但是没办法切换？
那怎么切换呢？我用了最原始的dom树获取到整个html文件，然后按钮点击触发的事件是改变整个html的类名即可实现，算是取了一个巧。

总的来说，相当于引入了一个官方写好的css文件。在index.html中引入，把类名写为dark，即可实现暗黑模式。
但是没办法切换？好办，给个按钮，能控制整个页面的类名就好了。
怎么控制？这里用Vue常规手段比较难实现，所以我动了一下脑子，决定简单粗暴，用最原始的HTML获取和操作DOM树的方法。获取整个DOM对象，然后用JavaScript的函数更改类名即可！

changeTheme(){
    
      //这里用了很原始的dom树，不得已之举了属于是
      if(this.dark){
    
        document.getElementsByClassName("WholePage")[0].setAttribute("class","WholePage dark");
      }
      else{
    
        document.getElementsByClassName("WholePage")[0].setAttribute("class","WholePage");
      }
    },

10、icon图标导入

elementplus自带的icon比较够用了。但是向官网的导入方式经常导入不了。
两种解决办法。
第一种，不用:icon=“名字”，而是直接
<el-icon><Notebook /></el-icon>
第二种，有些使用必须只能填名字，那就先import，然后在data里面像这样

Edit: Edit,
Picture: Picture,
UploadFilled: UploadFilled,

，后面就能直接输入名字了。

11、引导页

对于新用户，引导页是一种很实用的设计。这里使用了dirver.js第三方库。
官方地址：
kamranahmedse/driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page (github.com)
也可以参考这个博客：
Vue 页面引导效果(首次登录新用户引导) driver.js 引导页_织_网的博客-CSDN博客_vue引导页面提示功能开发
具体来说在layout写好driver实例，创建step.js文件，在mounted函数挂好初始化，然后在子组件的按钮上调用父组件的方法（this.$parent.method()），即可开始引导页操作。

12、使用Depcheck第三方库去除VUE不必要的依赖包

参考：https://blog.csdn.net/zhuzhoulin/article/details/114824714

D:\workplace\asynchronous-ldx-new\asynchronous-federated-learning-visual-platform\Client\client_front\node_modules\.bin>.\depcheck D:\workplace\asynchronous-ldx-new\asynchronous-federated-learning-visual-platform\Client\client_front
Unused dependencies
* core-js
* depcheck
* qs
Unused devDependencies
* @babel/core
* @babel/eslint-parser
* @vue/cli-plugin-babel
* @vue/cli-plugin-eslint
* autoprefixer
* less
* less-loader
* node-sass
* postcss
* sass-loader
* tailwindcss
* unocss
Missing dependencies
* dayjs: .\src\view\About.vue
 
core-js depcheck qs
 
@babel/core @babel/eslint-parser @vue/cli-plugin-babel @vue/cli-plugin-eslint autoprefixer less less-loader node-sass postcss sass-loader tailwindcss unocss