1. The role of export default is that
export is mainly used to output the interface of the module variables externally, and a file can be understood as a module. export is to export.
Import is to load another module with an export interface in a module, and import is to import.
2. What kind of content needs to be placed in the export default, and what kind of content does not need to be placed in it
Cannot set property ‘tableData’ of undefined
-
The role of the arrow function: help to get the current vue instance
-
How to store user information
localStorge
cookie can be accessed -
The role of vuex
Data sharing
Note that the shared data will be wiped every time the page is refreshed -
Upload files
Use the <el-update> component in element-ui
to provide two methods
1) action, connect to third-party storage space
2) custom upload and bind a function to process, usehttp-requestmethods to bind, such as binding handleRequets function , you can use handleRequest to send a request to the backend, and let the backend store -
The solution to the mismatch between nodejs and npm versions
Description of the problem, I reinstalled the lower version of npm, and then it did not match the node version, no matter what npm command is allowed, it will report an error crazily
npm WARN npm npm does not support Node.js v18.15.0
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache\_logs\2023-04-07T02_51_34_588Z-debug.log
PS E:\gitProject\demo\vue> npm install npm@9.5.0 -g
npm WARN npm npm does not support Node.js v18.15.0
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function
My solution is similar to the landlord, but I did not find the npm-cache folder, I found the global npm folder, then deleted it, and then reinstalled the corresponding version of npm
- Video player version mismatch
npm -v 9.5.0
node -v 18.15.0
vue -V @vue/cli 5.0.8
Tried the following commands to install vue-video-player
npm install vue-video-player --save
npm i vue-video-player
npm install video.js @videojs-player/vue --save
all failed
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: demo@0.1.0
npm ERR! Found: video.js@8.0.4
npm ERR! node_modules/video.js
npm ERR! dev video.js@"^8.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer video.js@"7.x" from vue-video-player@6.0.0
npm ERR! node_modules/vue-video-player
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! D:\nodejs\node_cache\_logs\2023-04-07T02_37_39_394Z-eresolve-report.txt
Solution: The solution is also very magical. At first, it seemed that my own videojs and the video.js required by vue-video-player did not match. Then I had a whim, so I simply used video.js to achieve it. ,
executed the following command
npm install --save-dev video.js
, and later found out that the video.js guy is difficult to operate (there is no tutorial on the Internet),
so I bit the bullet and read the error report again
Hehe! It really made me find out
npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps
, so I executed it
npm install video.js @videojs-player/vue --save --force
again, and it worked! ! ! , of course, it may also be because I installed video.js (because I have been commenting out vue-video-player before, so I actually have no way to determine when and which step this problem was solved), the specific reason I won't go into details, I will talk about it when I come back from my studies.
-
How to realize page jump and assign to another page variable
-
Set a column of el-table as a button
Add a button component directly in the table -
Pass value from parent component to child component
props is an object that contains all the data passed from the parent component to the child component.
props+setup However, I am not very good at using setup, because I have never used a value before, and I feel that I have to change the original data and method, fearing that more bugs will be changed. props+watch watch monitors the changes in the properties in
props
(because The properties in the prop are dynamically assigned), and then this property cannot be obtained directly in the methodsthis., so it needs to monitor its changes, and if there is a change, then assign the value in the past.Parent component Father.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<demo1 :message="message"></demo1>
<button @click="alter">父组件传值</button>
</template>
<script>
import demo1 from "@/components/demo1";
export default {
name: 'App',
components: {
demo1
},
data(){
return{
message:'seeYou',
}
},
methods:{
alter(){
this.message="happy"
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件
<template>
<div>
<div>{
{
msg}}</div>
<button @click="msg='hello'">改变msg</button>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "demo1",
props:{
message:String
}
,
watch:{
message:function (newData){
this.msg=newData;
this.getMessage(this.message)
}
},
data(){
// return obj
return {
msg:'',
}
},
methods:{
getMessage(){
console.log(this.msg)
}
}
}
</script>
<style scoped>
</style>
-
The vue3 setup
article understands the difference between setup() and <script setup><script> in vue3 -
Four levels of scope in vue
Global scope
Subtree scope
Component scope (can be understood as a class)
Instance scope (can be understood as an object)
In fact, there should be a code block scope (let) -
How the frontend downloads or exports files from the backend
-
img dynamically binds the src attribute
注意如果是vue项目文件夹下的资源（例如assets目录）需要require函数
//img标签
<img :src=imgSrc>
data：{
return{
imgSrc=require(imgUrl)//imgUrl:图片的相对地址
}
}
-
How to make the content of the span tag in the div evenly distributed in the div?
-
Error:
Runtime directive used on component with non-element root node.
It means that the custom instruction cannot be placed on the component, but on its own element, that is, the v-show used here cannot be placed on the custom component, but on the original label On, so a layer of div is set here -
When specifying dependencies in Vue.js or other npm packages, you can use the "~" and "^" symbols to specify version numbers. Difference:
The difference between them is how to update minor versions of packages and patch security updates.
For example, assuming the current version is Vue.js 2.5.0:If you specify a dependency of Vue.js in the form ~2.5.0, you can upgrade to any version of 2.5.x (eg 2.5.1, 2.5.2, etc.).
If you specify a dependency of Vue.js in the form ^2.5.0, you can upgrade to any version of 2.xx (eg 2.6.0, 2.7.0, etc.).
In practice, it is generally recommended to use the ^ symbol to specify the version number of a dependency, unless the security patch corresponding to a specific version of the package is very important and you do not want to automatically accept other minor updates.
The use of echarts in vue3 is introduced
globally and
mounted on the app on the entry file main.js
//注册
import * from as echarts from 'echarts'
app.config.globalProperties.$echarts=echarts
//组件中使用
this.$echarts
Local use, initial binding to an instance
//在使用的组件上
import * from as echarts from 'echarts'
let chart1 = echarts.init(document.getElementById('cpu'));
Notice:
echarts4:
import echarts from 'echarts'
echarts5:
import * as echarts from 'echarts'
- Vue3 introduces dataV error
ERROR in ./node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue?vue&type=template&id=5b231048 (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue?vue&type=template&id=5b231048)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):
VueCompilerError: <template v-for> key should be placed on the <template> tag.
at E:\gitProject\demo\vue\node_modules@jiaminghi\data-view\lib\components\decoration3\src\main.vue:9:11
7 | >
8 | <rect
9 | :key=“i”
| ^^^^^^^^
10 | :fill=“mergedColor[0]”
11 | :x=“point[0] - halfPointSideLength”
The solution given by the dataV github project
solution:
That is,
:key="i"
move it to the template tag
<template
v-for="(point, i) in points" :key="i"
>
<rect
:fill="mergedColor[0]"
:x="point[0] - halfPointSideLength"
:y="point[1] - halfPointSideLength"
:width="pointSideLength"
:height="pointSideLength"
>
<animate
v-if="Math.random() > 0.6"
attributeName="fill"
:values="`${mergedColor.join(';')}`"
:dur="Math.random() + 1 + 's'"
:begin="Math.random() * 2"
repeatCount="indefinite"
/>
</rect>
</template>
-
The role of the proxy
proxyObj is an object used to configure the proxy settings of the Vue.js application. In the devServer configuration in the vue.config.js file, enable proxying by passing this object to the proxy property.
Proxy settings can forward certain requests sent by your browser to another server. In a Vue.js application, proxy settings are usually used to forward front-end requests to the back-end server for interaction and collaboration between the front-end and the front-end. For example, requests sent by a front-end application to http://localhost:8081/api can be proxied to another server, such as http://example.com/api, so that the back-end server can handle the requests.
In this example, the proxyObj object sets two proxies:Requests for the / path are proxied to http://43.143.212.177:9090.
Requests for the /ws path are proxied to ws://43.143.212.177:9091.Through these proxy settings, the Vue.js application can interact with the specified server, realize the separate development of front-end and back-end, and effectively avoid cross-domain request problems.