Question:
Vue project, NPM run dev, the following error:
Or
reason:
The installed sass loader version is too high. Reinstall the lower version sass-loader.
Solution:
// Uninstall the current version
npm uninstall sass-loader
// Install the specified version
npm install --save-dev sass-loader@10I want to achieve the following effects: click the column above to switch the content of the column below
Write the code as follows (mainly see the JS part)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab{
display: inline-block;
width: 100px;
height: 50px;
background-color: #aaa;
}
.current{
background-color: yellow;
}
.content{
display: none;
}
</style>
</head>
<body>
<div class = "tab">
<div class = "tab_list">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</div>
<div class = "tab_con" style="display: block;">栏目1的内容</div>
<div class = "tab_con">栏目2的内容</div>
<div class = "tab_con">栏目3的内容</div>
</div>
<script>
var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
var tab_con = document.querySelectorAll(".tab_con");
for(var i = 0;i<tab_list.length;i++){
tab_list[i].onclick = function(){
for(var j = 0;j<tab_list.length;j++){
tab_list[j].className = "tab";
}
tab_list[i].className = "tab red";
for(var j = 0;j<tab_con.length;j++){
tab_con[j].style.display = "none";
}
tab_con[i].style.display = "block";
}
}
</script>
</body>
</html>
The result shows an error: uncaught typeerror: cannot set properties of undefined (setting 'classname') at htmldivelement.Tab.<computed>.onclick
Baidu tested it and found the following code:
<script>
var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
var tab_con = document.querySelectorAll(".tab_con");
for(var i = 0;i<tab_list.length;i++){
tab_list[i].onclick = function(){
console.log("栏目" + i + "被点击了");
}
}
</script>
In printing, I is 3 instead of 0, 1 and 2.
After consulting the data, we know that:
In the for loop, for each tab_List is bound to the onclick event to listen, but when the function is executed, I has ended the loop, so the printout is 3.
That is, the event listening function in the for loop needs to avoid using the loop variable I
So, if tab is involved_List [i], we can use this; If tab is involved_Con [i], that is, use I to get other elements, so we can give tab_List adds an attribute index, and then in the onclick function, we get this attribute, that is, we get the I we want
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 400px;
margin: 100px auto;
}
.tab .tab_list li{
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #aaa;
}
.tab .tab_list .current{
background-color: yellow;
}
.content{
display: none;
}
</style>
</head>
<body>
<div class = "tab">
<div class = "tab_list">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</div>
<div class = "tab_con" style="display: block;">栏目1的内容</div>
<div class = "tab_con">栏目2的内容</div>
<div class = "tab_con">栏目3的内容</div>
</div>
<script>
var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
var tab_con = document.querySelectorAll(".tab_con");
for(var i = 0;i<tab_list.length;i++){
tab_list[i].setAttribute("index",i);
tab_list[i].onclick = function(){
var index = this.getAttribute("index");
console.log("栏目" + index + "被点击了");
for(var j = 0;j<tab_list.length;j++){
tab_list[j].className = "";
}
tab_list[index].className = "current";
console.log(this.className);
for(var j = 0;j<tab_con.length;j++){
tab_con[j].style.display = "none";
}
tab_con[index].style.display = "block";
}
}
</script>
</body>
</html>
Problem Description:
problem: the SRC picture in img tag failed to load, and a fragment icon will appear in the original picture position, which is very unpleasant. How to be more beautiful
Cause analysis:
because the reverse display resource cannot be found or the path does not exist, it will be processed according to the IMG default processing method
Solution:
1. Find a default picture to replace
2. Trigger with onerror event
3. The oneror event is triggered repeatedly
<img src="url" onerror= "this.οnerrοr='';this.src='static/images/nop.svg'">
Can be solved
The console of uniapp reports an error:
reportJSException >>>> exception function:createInstanceContext,
exception:white screen cause create instanceContext failed,
check js stack ->Uncaught Error: Cannot find
module ‘…/…/…/…/…/…/…/common/zcm-main-nvue.css?vue&type=style&index=0&lang=css&mpType=page’
The console reports an error because the index.nvue page does not add @, to add @ to not report an error
Note: @ stands for the outermost a folder
The error in the following figure shows that the main entry is missing
Solution:
1. Delete the two files: node_modules and package-lock.json
2. Entering npm i on the command will download the package again
3. Check again and no error is reported
Question
When I download the program to esp32 with Arduino IDE, the following error message appears:
My board is the following Board:
Causes and Solutions
The reason is that there is an error in the baud rate selection. The baud rate I selected is 921600 by default. In fact, 115200 should be selected. In this way, you can download normally after downloading again.
As shown in the figure below, it is successful.
1. Error explanation: an error occurred during template parsing (template: “classpath resource”
As the name suggests, the reason for the error is that this indicates the resource
2. Solution: I don’t know what your mistake is, just tell you the reason for the mistake.
Open run first,
Right click to clear this page,
Refresh the error page, and the error message will be displayed in run, as shown in the following figure:
According to the error information, find the error code, find the corresponding problem and modify it.
It is configured according to the online tutorial, but it still reports errors. The error information is as follows:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
width: $sideBarWidth !important;
^
Undefined variable: "$sideBarWidth".
Baidu has a problem with the version of SASS loader
// in sass version 9, additionaldata is used, in sass version 8, prependdata is used, and in other versions, data
my version is 7.1.0, so finally changing the key name to data solves the problem
in vue.config.js, the configuration is as follows:
module.exports = {
...
css: {
// extract: true // Whether to use the css separation plugin ExtractTextPlugin (open skeleton screen must be this configuration)
// css presetter configuration item
// use additionalData in sass version 9 use prependData in version 8, other versions, use data
// semicolon here; required
loaderOptions: {
sass: {
data: '@import "./src/styles/variables.scss";'
}
},
},
...
},
Note: semicolon after the configuration file path; Media query expression must begin with ‘(‘
After I imported the CSS file of bootstrap, the following error messages appeared in the construction project:
ERROR in ./src/util/bootstrap/bootstrap.min.css
Module parse failed: D:\eclipseWorkspace\mbos\mbos-portal\webContent\src\util\bootstrap\bootstrap.min.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
at Parser.pp$4.raise (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
The reason is that the CSS file contains the @ symbol, and the configuration file does not specify a loader for the CSS file,
Solution: specify loader for CSS file:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
(a)’21442;’32771;65306;
styles.css Unexpected character’
When writing a project recently, in order to solve the problem that the mobile browser usually has a delay of about 300ms when sending click events, this is because the double click of the mobile terminal will scale, resulting in the delay of click judgment. Therefore, the fastlick library is introduced. It is a simple and easy-to-use library, which eliminates the delay between the physical click on the mobile browser and triggering a click event. The purpose is to make your application feel no delay and respond more sensitively without interfering with your current logic.
However, in the process of use, it will report an error if you double-click anywhere on the page. Even if it does not affect normal use, I can’t see it, so I’ll eliminate it.
So Baidu found a very simple way to introduce the global style touch action: pan-y;
*{
touch-action: pan-y;
}Put it in the global CSS and try it. Sure enough, no error will be reported when clicking (*^▽^*)
1、 A blank page appears and an error is reported
Scheme I:
1: The path of JS and CSS resources is incorrect
Solution: add assetspublicpath in config/index.js: ‘/’ Change to assetspublicpath: ‘. /’
2: Error in background image in CSS
Solution: add a line of code in build/utils.js publicPath:’../../’
Scheme 2: some people may create Vue basic projects through hbuilder. There are no files in scheme 1 in the directory. Then you can try the scheme at this time. It’s easy to use on my side. I’m not sure everyone is effective.
Solution: create the vue.config.js file in the project root directory
The contents of the document are as follows:
module.exports = {
publicPath : './'
}2、 Blank page, no resource error
At this time, the problem may be caused by the routing mode
history ：
The new pushstate () and replacestate () methods in HTML5 history interface are utilized. (specific browser support is required) these two methods are applied to the browser’s history stack. On the basis of the existing back, forward and go, they provide the function of modifying the history. Only when they perform modification, although the current URL is changed, the browser will not immediately send a request to the back end.
Solution:
The default route of Vue is hash mode. You can modify it to hash. Or directly comment out mode: ‘history’,
Conclusion: the above is the relevant information I know. If any boss knows other questions, you can leave a message and learn together.
Project scenario:
use less development file
Problem Description:
less installation error
Failed to compile with 1 error
Syntax Error: TypeError: this.getOptions is not a function
Cause analysis:
the current version does not match the less and less loader versions, and the less loader version needs to be replaced </ font>
Solution:
Install less version 4.1.1 and less loader version 7.3.0
<style scoped lang="less">
.wrapper{
.header{...}
.content{...}
}
</style>