vue前端开发100问（持续更新）

1.export default的作用是
export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。

import就是在一个模块中加载另一个含有export接口的模块， import就是导入。

2.什么样的内容需要放在export default里面，什么样子的内容不需要放在里面

Cannot set property ‘tableData’ of undefined

箭头函数的作用：帮助获取当前vue实例
如何存储用户信息
localStorge
cookie都可以存取
vuex的作用
数据共享
注意每次刷新页面共享的数据会被刷掉
上传文件
使用element-ui里面的 <el-update>组件
提供了两种方式
1）action，接第三方存储空间
2）自定义上传绑定一个函数处理，使用http-request方法进行绑定，比如绑定handleRequets函数，可以利用handleRequest像后端发送请求，让后端存储
关于nodejs和npm版本不匹配的解决方法

问题描述，重装了低版本的npm，然后和node版本不匹配了，不管允许任何npm命令都疯狂报错

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

我的解决办法类似楼主，但我没有找到npm-cache文件夹，我找到了全局的npm文件夹，然后删除了，后来又重新安装了对应版本的npm

视频播放器版本不匹配

npm -v  9.5.0
node -v 18.15.0
vue -V  @vue/cli 5.0.8

尝试了以下几条命令安装 vue-video-player

npm install vue-video-player --save
npm i vue-video-player
npm install video.js @videojs-player/vue --save

均以失败告终

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

解决：解决的也很魔幻，一开始看他的意思好像是我自己的videojs和vue-video-player需要的video.js不匹配，然后我突发奇想，那我干脆用video.js实现算了，
执行了以下命令
npm install --save-dev video.js
后来发现，video.js这家伙操作起来有难度（网上没有教程）
于是我就又硬着头皮看报错
哎嘿！还真让我发现了
npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps
于是我就又执行了
npm install video.js @videojs-player/vue --save --force
居然，成功了！！！，当然，也可能是因为我安装了video.js的原因（因为之前一直注释掉vue-video-player，所以我其实没办法确定到底这个问题是什么时候解决的，哪一步解决的），具体原因就不细究了，等我学成归来再讲。
在这里插入图片描述

ElementUI的el-table怎样隐藏某一列
怎么实现页面跳转并且赋值给另外一个页面的变量
vue实现页面跳转并传参的八种方法
将el-table的某一列设置为按钮
直接在表格里面加一个button组件
父组件给子组件传值

props是一个对象，包含父组件传递给子组件的所有数据。
props+setup但是，我不太会用setup，因为之前一值没用过，感觉还得改原有的data和method，怕改出更多的bug
props+watch
watch监听props里面属性的变化（因为prop里面的属性是动态赋值的），然后这个属性是不能直接在methods里面通过this.获取的，所以需要监听它的变化，如果发生变化，再赋值过去。

父组件 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>

vue3 setup
一文看懂vue3中setup()和＜script setup＞＜script＞的区别
vue中四个级别的作用域
全局作用域
子树作用域
组件作用域（可以理解为类）
实例作用域（可以理解为对象）
其实还应该有一个代码块作用域（let）
原生js实现文件下载
前端从后端下载或导出文件的方法

img动态绑定src属性

注意如果是vue项目文件夹下的资源（例如assets目录）需要require函数

//img标签
<img :src=imgSrc>

data：{
    
    
return{
    
    
imgSrc=require(imgUrl)//imgUrl:图片的相对地址
}
}

如何让div里的span标签内容平均分布在div内？
报错：
Runtime directive used on component with non-element root node.
意思是自定义指令不能放到组件上，而是要放到自有的元素上,也就是这里用到的v-show不能放在自定义组件上,而是放在原来就有的标签上,所以这里套了一层div
在 Vue.js 或其他 npm 包中指定依赖项时，可以使用 “~” 和 “^” 符号来指定版本号。区别：
它们之间的区别在于如何更新软件包的次要版本和修补程序安全更新。
举例说明，假设当前版本是 Vue.js 2.5.0：

如果以 ~2.5.0 的形式指定 Vue.js 的依赖项，则可以升级到 2.5.x 的任何版本（例如 2.5.1、2.5.2 等）。
如果以 ^2.5.0 的形式指定 Vue.js 的依赖项，则可以升级到 2.x.x 的任何版本（例如 2.6.0、2.7.0 等）。
在实践中，通常建议使用 ^ 符号指定依赖项的版本号，除非特定版本的软件包对应的安全补丁非常重要且不想自动接受其他次要更新。

echarts在vue3中的使用
全局引入
在入口文件main.js上挂载到app上

//注册
import * from as echarts from 'echarts'
app.config.globalProperties.$echarts=echarts
//组件中使用
this.$echarts

局部使用，初始化绑定到某个实例上

//在使用的组件上
import * from as echarts from 'echarts'
let chart1 = echarts.init(document.getElementById('cpu'));

注意：

echarts4:
 import echarts from 'echarts'
echarts5:
 import * as echarts from 'echarts'

vue3引入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”

dataV github 项目给出的解决方案

解决方案：元素上，它使用了 :key=“i” 属性来声明一个循环变量 i，而这个 :key 通常用于唯一地标识循环中的每个元素。然而，这个属性应该被放置在包含循环的标签上，而不是你想循环的实际元素上。
也就是把 :key="i"移到template标签内

  <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>

代理的作用
proxyObj 是用于配置 Vue.js 应用程序的代理设置的对象。在 vue.config.js 文件的 devServer 配置中，通过将这个对象传递给 proxy 属性来启用代理。
代理设置可以将浏览器发送的某些请求转发到另一个服务器上。在 Vue.js 应用程序中，代理设置通常用于将前端的请求转发到后端服务器上，以便于前后端进行交互和协作。例如，可以将前端应用程序发送到 http://localhost:8081/api 的请求代理到另一个服务器，例如 http://example.com/api 上，以便让后端服务器处理这些请求。
在这个例子中，proxyObj 对象设置了两个代理：

/ 路径的请求被代理到 http://43.143.212.177:9090 上。
/ws 路径的请求被代理到 ws://43.143.212.177:9091 上。

通过这些代理设置，Vue.js 应用程序可以与指定的服务器进行交互，实现前后端分离开发，并且可以有效地避免跨域请求问题。

vue前端开发100问（持续更新）

猜你喜欢