Summary of work experience and problems in October 2023

Table of contents

1. The base64 encryption and decryption that comes with window

2.ElementUI modifies the background color of the table when the mouse is moved

3. Tens of thousands of eslint errors when saving vscode

4.Git pulls the Gitee repository and reports an error: "fatal: unable to access ''": Failed to connect to 127.0.0.1 port 1080: Connection r...

4.1 Check locally whether Git uses a proxy

4.2 Cancel proxy

5. Online bug, console error + style error

6. Use tags in git to correspond to version numbers

7.npm i 报错 Cannot read properties of null (reading ‘pickAlgorithm‘)

8. Page problems found after packaging and deployment

9. Modify the background color of elementUI table header

10. The vue project is developed locally, and my project cannot be accessed on the same local area network.


1. The base64 encryption and decryption that comes with window

const encodedData = btoa("Hello, world"); // 加密
const decodedData = atob(encodedData); // 解密

2.ElementUI modifies the background color of the table when the mouse is moved

Scenario: Encountered when doing the theme switching function. When switching to dark mode, the class name found through F12 found that the style could not be overwritten.

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
@include background-color("background_color-el-table-hover")
}

3. Tens of thousands of eslint errors when saving vscode

 Problem Description :

When writing a project with vue, I turned on the ESLint syntax check as usual, but I found various errors, single and double quotation marks, and function spaces after formatting and saving using vscode. Because vscode's own formatting plug-in does not match ESLint. Therefore, some configurations need to be modified to achieve the configuration effect. Here it is modified in a simple way.

Since vsdoe formatting does not match ESlint, we will modify the rules of vscode. Create the file .prettierrc under the current project and modify the relevant configuration items. Here we only modify the single and double quotes and semicolons.

{ "semi": true, "singleQuote": true }

For me, it is directly set to {} empty object, nothing is checked, and there is no error.


4.Git pulls the Gitee repository and reports an error: "fatal: unable to access ''": Failed to connect to 127.0.0.1 port 1080: Connection r...

4.1 Check locally whether Git uses a proxy

git config --global http.proxy 

4.2 Cancel proxy

git config --global --unset http.proxy

 


5. Online bug, console error + style error

The reason is the version problem of ElementUI.js

My development environment is 2.13

Production is 2.19

Just download 2.13 and put it into the production environment.

What must be checked is that if local development is normal, then the online version must be replaced with the local version.


6. Use tags in git to correspond to version numbers

        First make sure your code has been submitted (after add, commit and push are completed)

        Then:



git tag -a v1.01 -m "注释信息"   //-a为添加版本号   v1.01为你为这个版本的名作也可以说是标签   -m为注释信息
git push --tags     //将本地所有tags提交到远程仓库中,则会对应其版本号了


-----------其他常用命令----------

git tag   //显示所有的版本信息,如果为空就代表你没有此时没有任何版本信息

git checkout +版本标签   //则此时全体内容会转变到此版本的所有信息

git tag -l -n   //显示所有标签,并显示其标签注释

 

 


7.npm i 报错 Cannot read properties of null (reading ‘pickAlgorithm‘)

Solution: Clear the cache npm cache clear --force and then reinstall the dependenciesnpm install  


8. Page problems found after packaging and deployment

question:

After packaging and deployment, it was found that the page could only display one screen and there was no scroll bar, resulting in that the page could only be partially displayed.

Solution: There is a high probability that it is a CSS problem, especially third-party CSS. You can try to search for overflow: hidden globally. The focus is on this attribute in the body or HTML. Delete it.

 


9. Modify the background color of elementUI table header

1、首先使用 elementUI中的header-cell-style 属性
<el-table
  :data="paperList"
  :header-cell-style="getRowClass"
>
2、然后在getRowClass方法中 改变css样式
getRowClass({ rowIndex, columnIndex }) {
  if (rowIndex == 0) {
    return "background:#f8f8f9;";
  }
},

10. The vue project is developed locally, and my project cannot be accessed on the same local area network.

In the package.json file, add --host= local IP address to the command to be run by the script; at the same time, turn off the firewall.

"scripts": {
    "serve": "vue-cli-service serve --host=192.168.31.60",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Guess you like

Origin blog.csdn.net/wanghaoyingand/article/details/133855509