Innovation training (XI) summary of some bugs in the development process

Preface

This is of great significance to the development process 、 It's difficult bug Records and summary of .
modify bug Documents consulted 、 At least hundreds of blogs , It is a lesson of blood and tears .
Record here , One is to prove your own development process , The second is summary , Avoid repeating mistakes .

1、 The custom rule and binding form are as follows ：

Note that the rule name should not contain such as “name” This keyword , Otherwise, an error will be reported

Taskform: {
    
        Task_name: "",
        Task_class: "",
        Task_minmember: 1, // Minimum number of people , Set up 1-10
        Task_model: "", // Model （py file , The format is predetermined , The storage location has not been determined yet ）  Here, the front-end should realize the file selection function 
        Task_premodel: true, // Default True It's random generation . Preprocessing model （ The initial model , optional , The default is random , The storage location has not been determined yet ）
        Task_dataset: "", // Datasets are optional （ Save on the training side , Different training end data sets are independent ）
      },
      rules:
        {
    
          Task_name: [
            {
    
              required: true,
              message: " Please enter the task name ",
              trigger: "blur",
            },
            {
    
              min: 3,
              max: 20,
              message: " The length should be 3-20 Between characters ",
              trigger: "blur",
            },
          ],
          
        },
 

2、input Input box icon does not show the problem

Refer to the following , Use slots to solve
elementPlus Use icon The icon does not show the solution _ Little black ya_ The blog of -CSDN Blog _element icon Unable to display
Icon Icon | Element Plus (gitee.io)
Or directly ,prefix-icon Don't precede it with a colon , Can also be ：

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

3、Tailwind！ I have been looking for this for a long time ！ It can be realized directly in class Enter a style in .

Tailwind CSS Chinese document - No need to leave your HTML, You can quickly build a modern website .
stay Vue 3 and Vite install Tailwind CSS - Tailwind CSS Chinese document
Don't forget to install and generate and modify configuration files ！
The original template used unocss, But there is no proper documentation , I used this .

4、 Methods for importing third-party icon libraries

Introducing Ali iconfont Icon method and precautions _tuonioooo The blog of -CSDN Blog _iconfont Icon

5、 Click to log in and only change the address page without refreshing

Use element When the plug-in clicks jump, an error occurs form-item.vue:315 Uncaught (in promise) TypeErelForm.removeField is not a function_if The blog of time coming back -CSDN Blog
Here's another thing to note , be-all el-form-item Items must be wrapped in el-form within ！ You can't pull it out alone like a template ！

6、 Radio box here label Binding values can only be of type string/int, Therefore, the bound data is better not to use Boolean type , Here we use 01 replace .

ElementUI And el-radio in label and :label The difference between 【 Avoid trampling 】_urnotzkey The blog of -CSDN Blog _el-radio label

Don't forget to put a colon here ！

<el-form-item label=" The initial model " prop="Task_premodel">
              <el-radio-group v-model="Taskform.Task_premodel">
                <el-radio :label=0 @click="premodle_fromuser(false)" > Random generation </el-radio >
              <el-radio :label=1 @click="premodle_fromuser(true)" > Optional </el-radio >
</el-radio-group>
 

7、 Properties of components , Don't forget to add... At the beginning of some binding ： The colon ！

8、 Parameter passing during page Jump , Use params How to achieve .

Vue3x Route jump and parameter transmission (useRouter)_ Yunfei's blog -CSDN Blog _vue.use(router)

9、 Theme color dark mode is introduced

Resolve errors ：Module not found: Error: Can‘t resolve ‘element-plus/lib/theme-chalk/index.css‘_ The coder's blog -CSDN Blog
It has been written here for a long time .element There is something wrong with the official statement , It is equivalent to introducing an officially written css file . stay index.html Introduction in . But there is no way to switch ？
Then how to switch ？ I used the most primitive dom The tree gets the whole html file , Then the event triggered by the button click is to change the whole html The class name of , It's a coincidence .

in general , It is equivalent to introducing an officially written css file . stay index.html Introduction in , Write the class name as dark, You can achieve dark mode .
But there is no way to switch ？ Easy to handle , Give me a button , You can control the class name of the entire page .
How to control ？ Here we use Vue Conventional means are difficult to achieve , So I used my head , The decision was simple and rough , Use the most primitive HTML Getting and manipulating DOM Tree method . Get the entire DOM object , And then use JavaScript To change the class name ！

changeTheme(){
    
      // Here we use a very primitive dom Trees , The last resort belongs to 
      if(this.dark){
    
        document.getElementsByClassName("WholePage")[0].setAttribute("class","WholePage dark");
      }
      else{
    
        document.getElementsByClassName("WholePage")[0].setAttribute("class","WholePage");
      }
    },

10、icon Icon import

elementplus Self contained icon That's enough . However, the method of importing to the official website often fails .
Two solutions .
The first one is , no need :icon=“ name ”, Instead of directly
<el-icon><Notebook /></el-icon>
The second kind , Some users must only fill in their names , First of all import, And then in data It's like this

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

, Then you can enter the name directly .

11、 The guide page

For new users , The boot page is a very practical design . It's used here dirver.js Third party Library .
Official address ：
kamranahmedse/driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page (github.com)
You can also refer to this blog ：
Vue Page guidance effect ( First login new user boot ) driver.js The guide page _ weave _ Web blog -CSDN Blog _vue Guide page prompt function development
Specifically, in layout Write well driver example , establish step.js file , stay mounted Function is initialized , Then call the method of the parent component on the button of the child component （this.$parent.method()）, You can start the boot page operation .

12、 Use Depcheck Third party libraries are removed VUE Unnecessary dependency packages

Reference resources ：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