Vue 프런트 엔드 개발에 대한 100가지 질문(지속적으로 업데이트됨)

1. export default 의 역할은
export 는 주로 모듈 변수의 인터페이스를 외부로 출력하는데 사용되며, 파일은 모듈로 이해할 수 있습니다. 수출은 수출이다.

가져오기는 모듈에서 내보내기 인터페이스로 다른 모듈을 로드하는 것이고 가져오기는 가져오기입니다.

2. 내보내기 기본값에 넣어야 하는 콘텐츠와 넣지 않아도 되는 콘텐츠 종류

정의되지 않은 'tableData' 속성을 설정할 수 없습니다.

4. 화살표 함수의 역할: 현재 vue 인스턴스를 가져오는 데 도움

5. 사용자 정보를 저장하는 방법
   localStorge
   쿠키에 액세스할 수 있음

6. vuex의 역할
   데이터 공유 공유
   데이터는 페이지를 새로고침할 때마다 지워집니다.

7. 파일 업로드
   element-ui의 <el-update> 구성 요소를 사용하여
   두 가지 방법을 제공합니다
   . 1) 작업, 타사 저장 공간에 연결
   2) 사용자 정의 업로드 및 처리할 기능 바인딩, http-request바인딩할 바인딩 방법 사용(예: handleRequets 기능 바인딩) , handleRequest를 사용하여 백엔드로 요청을 보내고 백엔드가 저장하도록 할 수 있습니다.

8. nodejs와 npm 버전 간 불일치에 대한 해결책

문제 설명, npm 하위 버전을 다시 설치했는데 노드 버전이 일치하지 않아 어떤 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을 다시 설치했습니다.

9. 비디오 플레이어 버전 불일치

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가 일치하지 않는 것 같았습니다. . ,
다음 명령을 실행
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를 설치했기 때문일 수도 있습니다. 자세한 내용은 다루지 않겠습니다. 공부를 마치고 돌아오면 이야기하겠습니다.

10. ElementUI의 el-table은 어떻게 특정 열을 숨깁니까?

11. 페이지 점프를 실현하고 다른 페이지 변수에 할당하는 방법

12. vue가 페이지 점프를 실현하고 매개변수를 전달하는 8가지 방법

13. el-table의 컬럼을 버튼으로 설정
    테이블에 직접 버튼 컴포넌트 추가

14. 상위 구성 요소에서 하위 구성 요소로 값 전달

    props는 상위 구성 요소에서 하위 구성 요소로 전달되는 모든 데이터를 포함하는 객체입니다.
    props+setup 다만 저는 밸류를 써본적이 없어서 셋업을 잘 사용하지 못하고, 또 버그가 생길까 봐 원래의 데이터와 메소드를 바꿔야 할 것 같은 느낌이 듭니다.
    props 속성의 변경 사항
    (props 속성이 동적으로 할당되기 때문에) 이 속성은 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>

16. vue3 설정
    문서는 vue3에서 setup()과 <script setup><script>의 차이점을 이해합니다.

17. vue의 4단계 범위
    전역 범위
    하위 트리 범위
    구성 요소 범위(클래스로 이해 가능)
    인스턴스 범위(객체로 이해 가능)
    사실 코드 블록 범위(let)가 있어야 합니다.

18. 네이티브 js는 파일 다운로드를 실현합니다.

19. 프런트엔드가 백엔드에서 파일을 다운로드하거나 내보내는 방법

20. img는 src 속성을 동적으로 바인딩합니다.

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

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

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

21. div에 있는 span 태그의 내용을 div에 고르게 분산시키는 방법은 무엇입니까?

22. 오류:
    Runtime directive used on component with non-element root node.
    커스텀 명령어는 컴포넌트에 배치할 수 없지만 자체 요소에, 즉 여기서 사용하는 v-show는 커스텀 컴포넌트에 배치할 수 없고 원래 레이블 On에 배치하므로 div 레이어 여기에 설정

23. 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.xx의 모든 버전(예: 2.6.0, 2.7.0 등)으로 업그레이드할 수 있습니다.
    실제로 패키지의 특정 버전에 해당하는 보안 패치가 매우 중요하고 다른 마이너 업데이트를 자동으로 수락하지 않으려는 경우가 아니면 일반적으로 ^ 기호를 사용하여 종속성의 버전 번호를 지정하는 것이 좋습니다.

vue3의 echarts 사용은
전 세계적으로 도입되어
main.js 항목 파일의 앱에 마운트됩니다.

//注册
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'

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

26. 프록시 proxyObj의 역할은
    Vue.js 애플리케이션의 프록시 설정을 구성하는 데 사용되는 개체입니다. vue.config.js 파일의 devServer 구성에서 이 개체를 프록시 속성에 전달하여 프록시를 활성화합니다.
    프록시 설정은 브라우저에서 보낸 특정 요청을 다른 서버로 전달할 수 있습니다. 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 애플리케이션은 지정된 서버와 상호 작용하고 프런트 엔드와 백엔드의 개별 개발을 실현하며 도메인 간 요청 문제를 효과적으로 피할 수 있습니다.