1. El papel de la exportación predeterminada es que
la exportación se utiliza principalmente para generar la interfaz de las variables del módulo externamente, y un archivo puede entenderse como un módulo. exportar es exportar.
Importar es cargar otro módulo con una interfaz de exportación en un módulo e importar es importar.
2. Qué tipo de contenido debe colocarse en el valor predeterminado de exportación y qué tipo de contenido no debe colocarse en él
No se puede establecer la propiedad 'tableData' de indefinido
-
El papel de la función de flecha: ayuda para obtener la instancia actual de vue
-
Cómo almacenar información del usuario Se puede acceder a la cookie
localStorge -
El papel de vuex
Data sharing
Tenga en cuenta que los datos compartidos se borrarán cada vez que se actualice la página -
Subir archivos
Use el componente <el-update> en element-ui
para proporcionar dos métodos
1) acción, conectarse a un espacio de almacenamiento de terceros
2) carga personalizada y vincular una función para procesar, usarhttp-requestmétodos para vincular, como vincular la función handleRequets , puede usar handleRequest para enviar una solicitud al backend y dejar que el backend almacene -
La solución al desajuste entre las versiones de nodejs y npm
Descripción del problema, reinstalé la versión inferior de npm y luego no coincidía con la versión del nodo, no importa qué comando npm esté permitido, informará un error locamente
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
Mi solución es similar al propietario, pero no encontré la carpeta npm-cache, encontré la carpeta global npm, luego la eliminé y luego reinstalé la versión correspondiente de npm
- La versión del reproductor de video no coincide
npm -v 9.5.0
node -v 18.15.0
vue -V @vue/cli 5.0.8
Probé los siguientes comandos para instalar vue-video-player
npm install vue-video-player --save
npm i vue-video-player
npm install video.js @videojs-player/vue --save
todo falló
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
Solución: La solución también es muy mágica. Al principio, parecía que mi propio videojs y el video.js requerido por vue-video-player no coincidían. Luego tuve un capricho, así que simplemente usé video.js para lograrlo. .,
ejecutó el siguiente comando
npm install --save-dev video.js
, y luego descubrí que el tipo video.js es difícil de operar (no hay un tutorial en Internet),
así que mordí la bala y leí el informe de error nuevamente
¡Jeje! Realmente me hizo descubrir
npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps
, así que lo ejecuté
npm install video.js @videojs-player/vue --save --force
de nuevo, ¡y funcionó! ! ! , por supuesto, también puede deberse a que instalé video.js (porque he estado comentando vue-video-player antes, por lo que en realidad no tengo forma de determinar cuándo y en qué paso se resolvió este problema), la razón específica por la que No entraré en detalles, hablaré de eso cuando regrese de mis estudios.
-
¿Cómo oculta la tabla electrónica de ElementUI una determinada columna?
-
Cómo realizar el salto de página y asignar a otra variable de página
-
Ocho formas en que vue realiza saltos de página y parámetros de paso
-
Establecer una columna de el-table como un botón
Agregar un componente de botón directamente en la tabla -
Pasar valor del componente principal al componente secundario
props es un objeto que contiene todos los datos pasados del componente principal al componente secundario.
props+setup Sin embargo, no soy muy bueno usando la configuración, porque nunca he usado un valor antes, y siento que tengo que cambiar los datos y el método originales, temiendo que se cambien más errores. los cambios en las propiedades en
props
(porque el atributo en prop se asigna dinámicamente), y luego este atributo no se puedethis.obtener directamente en los métodos, por lo que debe monitorear sus cambios y asignar el valor si cambia.Componente principal 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>
-
Cuatro niveles de ámbito en vue
Ámbito global
Ámbito de subárbol
Ámbito de componente (se puede entender como una clase)
Ámbito de instancia (se puede entender como un objeto)
De hecho, debería haber un ámbito de bloque de código (let) -
Cómo descarga o exporta archivos el frontend desde el backend
-
img vincula dinámicamente el atributo src
注意如果是vue项目文件夹下的资源（例如assets目录）需要require函数
//img标签
<img :src=imgSrc>
data：{
return{
imgSrc=require(imgUrl)//imgUrl:图片的相对地址
}
}
-
¿Cómo hacer que el contenido de la etiqueta span en el div se distribuya uniformemente en el div?
-
Error:
Runtime directive used on component with non-element root node.
Significa que la instrucción personalizada no se puede colocar en el componente, sino en su propio elemento, es decir, el v-show utilizado aquí no se puede colocar en el componente personalizado, sino en la etiqueta original On, por lo que una capa de div se establece aquí -
Al especificar dependencias en Vue.js u otros paquetes npm, puede usar los símbolos "~" y "^" para especificar los números de versión. Diferencia:
la diferencia entre ellos es cómo actualizar versiones menores de paquetes y parchear actualizaciones de seguridad.
Por ejemplo, suponiendo que la versión actual es Vue.js 2.5.0:Si especifica una dependencia de Vue.js en el formato ~2.5.0, puede actualizar a cualquier versión de 2.5.x (por ejemplo, 2.5.1, 2.5.2, etc.).
Si especifica una dependencia de Vue.js en el formulario ^2.5.0, puede actualizar a cualquier versión de 2.xx (por ejemplo, 2.6.0, 2.7.0, etc.).
En la práctica, generalmente se recomienda usar el símbolo ^ para especificar el número de versión de una dependencia, a menos que el parche de seguridad correspondiente a una versión específica del paquete sea muy importante y no desee aceptar automáticamente otras actualizaciones menores.
El uso de echarts en vue3 se presenta
globalmente y
se monta en la aplicación en el archivo de entrada main.js
//注册
import * from as echarts from 'echarts'
app.config.globalProperties.$echarts=echarts
//组件中使用
this.$echarts
Uso local, vinculación inicial a una instancia
//在使用的组件上
import * from as echarts from 'echarts'
let chart1 = echarts.init(document.getElementById('cpu'));
Aviso:
echarts4:
import echarts from 'echarts'
echarts5:
import * as echarts from 'echarts'
- Vue3 introduce error dataV
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”
La solución dada por el proyecto dataV github
solución:
Es decir,
:key="i"
muévelo a la etiqueta de la plantilla.
<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>
-
La función del proxy
proxyObj es un objeto que se utiliza para configurar los ajustes del proxy de la aplicación Vue.js. En la configuración de devServer en el archivo vue.config.js, habilite el proxy pasando este objeto a la propiedad del proxy.
La configuración del proxy puede reenviar ciertas solicitudes enviadas por su navegador a otro servidor. En una aplicación Vue.js, la configuración del proxy generalmente se usa para reenviar solicitudes de front-end al servidor de back-end para la interacción y colaboración entre el front-end y el front-end. Por ejemplo, las solicitudes enviadas por una aplicación front-end a http://localhost:8081/api se pueden enviar a otro servidor, como http://example.com/api, para que el servidor back-end pueda manejar la peticiones.
En este ejemplo, el objeto proxyObj establece dos proxies:Las solicitudes de la ruta / se envían a http://43.143.212.177:9090.
Las solicitudes de la ruta /ws se envían a ws://43.143.212.177:9091.A través de esta configuración de proxy, la aplicación Vue.js puede interactuar con el servidor especificado, realizar el desarrollo por separado de front-end y back-end y evitar de manera efectiva los problemas de solicitud entre dominios.