Vue フロントエンド開発に関する 100 の質問 (継続的に更新)

プログラミング 2023-07-29 01:57:48 訪問数: null

1. エクスポートデフォルトの役割は、
エクスポートは主にモジュール変数のインターフェイスを外部に出力するために使用され、ファイルはモジュールとして理解できます。エクスポートは輸出することです。

インポートはモジュール内にエクスポートインターフェイスを持つ別のモジュールをロードすること、インポートはインポートすることです。

2. エクスポートのデフォルトにどのような種類のコンテンツを配置する必要があるか、またどのような種類のコンテンツをエクスポートデフォルトに配置する必要がないのか

未定義のプロパティ「tableData」を設定できません

  1. アロー関数の役割: 現在の Vue インスタンスの取得に役立ちます

  2. ユーザー情報の保存方法
    localStorge
    Cookie にアクセス可能

  3. vuex の役割
    データ共有
    ページが更新されるたびに共有データが消去されることに注意してください

  4. ファイルをアップロードする
    element-ui の <el-update> コンポーネントを使用して
    2 つのメソッドを提供します。
    1) アクション、サードパーティのストレージ領域に接続します。
    2) カスタムアップロードして処理する関数をバインドします。http-requestバインドするメソッド (handleRequets 関数のバインドなど)を使用します。 handleRequest を使用してリクエストをバックエンドに送信し、バックエンドに保存させることができます。

  5. 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を再インストールしました。

  1. ビデオプレーヤーのバージョンが一致しない
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 をコメントアウトしていたので、実際には、この問題がいつ、どの段階で解決されたのかを判断する方法がありません)。詳細には触れませんが、勉強から戻ったら話します。
ここに画像の説明を挿入

  1. ElementUI の el-table はどのようにして特定の列を非表示にするのですか

  2. ページジャンプを実現し、別のページ変数に代入する方法

  3. vue がページジャンプを実現してパラメータを渡すための 8 つの方法

  4. el-table の列をボタンとして設定する
    ボタンコンポーネントをテーブルに直接追加する

  5. 親コンポーネントから子コンポーネントに値を渡す

    props は、親コンポーネントから子コンポーネントに渡されるすべてのデータを含むオブジェクトです。
    props+setup しかし、値を使ったことがないので、setup を使うのがあまり得意ではありませんし、またバグが増えるのではないかと元のデータやメソッドを変更する必要があると感じています。
    propsのプロパティの変更
    (prop の属性は動的に割り当てられるため)、この属性は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>

  1. vue3 セットアップの
    記事では、vue3 の setup() と <script setup><script> の違いを理解しています。

  2. vue の 4 つのレベルのスコープ
    グローバル スコープ
    サブツリー スコープ
    コンポーネント スコープ (クラスとして理解できる)
    インスタンス スコープ (オブジェクトとして理解できる)
    実際には、コード ブロック スコープ (let) があるはずです

  3. ネイティブjsでファイルダウンロードを実現

  4. フロントエンドがバックエンドからファイルをダウンロードまたはエクスポートする方法

  5. img は src 属性を動的にバインドします

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

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

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

  1. div内のspanタグの内容をdiv内で均等に分散させるにはどうすればよいですか?

  2. エラー:
    Runtime directive used on component with non-element root node.
    これは、カスタム命令をコンポーネントには配置できませんが、その独自の要素に配置できることを意味します。つまり、ここで使用される v-show は、カスタム コンポーネントには配置できませんが、元のラベル On に配置できるため、div のレイヤーが配置されます。ここに設定されています

  3. Vue.js または他の npm パッケージで依存関係を指定する場合、「~」および「^」記号を使用してバージョン番号を指定できます。違い:
    それらの違いは、パッケージのマイナー バージョンを更新する方法とセキュリティ アップデートにパッチを適用する方法です。
    たとえば、現在のバージョンが Vue.js 2.5.0 であると仮定します。

    Vue.js の依存関係を ~2.5.0 の形式で指定すると、2.5.x の任意のバージョン (2.5.1、2.5.2 など) にアップグレードできます。
    Vue.js の依存関係を ^2.5.0 の形式で指定すると、2.xx の任意のバージョン (2.6.0、2.7.0 など) にアップグレードできます。
    実際には、パッケージの特定のバージョンに対応するセキュリティ パッチが非常に重要で、他のマイナー アップデートを自動的に受け入れたくない場合を除き、依存関係のバージョン番号を指定するには ^ 記号を使用することが一般的に推奨されます。

vue3 での echart の使用は
グローバルに導入され、
アプリのエントリ ファイル 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'
  1. 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>

  1. プロキシの役割
    proxyObj は、Vue.js アプリケーションのプロキシ設定を構成するために使用されるオブジェクトです。vue.config.js ファイルの devServer 構成で、このオブジェクトをプロキシ プロパティに渡してプロキシを有効にします。
    プロキシ設定により、ブラウザから送信された特定のリクエストを別のサーバーに転送できます。Vue.js アプリケーションでは、通常、プロキシ設定は、フロントエンドとフロントエンド間の対話とコラボレーションのために、フロントエンド リクエストをバックエンド サーバーに転送するために使用されます。たとえば、フロントエンド アプリケーションによって http://localhost:8081/api に送信されたリクエストを、http://example.com/api などの別のサーバーにプロキシして、バックエンド サーバーがリクエスト。
    この例では、proxyObj オブジェクトは 2 つのプロキシを設定します。

    / パスに対するリクエストは http://43.143.212.177:9090 にプロキシされます。
    /ws パスに対するリクエストは、ws://43.143.212.177:9091 にプロキシされます。

    これらのプロキシ設定を通じて、Vue.js アプリケーションは指定されたサーバーと対話し、フロントエンドとバックエンドの個別の開発を実現し、クロスドメイン要求の問題を効果的に回避できます。

おすすめ

転載: blog.csdn.net/m0_51312071/article/details/129942246
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com