プロジェクトのシナリオ:

提示：这里简述项目相关背景：
フロントエンドページの詳細ページは正常に読み込まれますが、コンソールに赤い警告メッセージが表示されます。メッセージの内容は次のとおりです。

[Vue warn]: Unknown custom element: <viewer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <OutFile> at src/views/repair/outFile.vue
       <D2LayoutHeaderAside> at src/layout/header-aside/layout.vue
         <App> at src/App.vue
        

   <Root>

問題の説明

提示：这里描述项目中遇到的问题：

以下に示すように:
ここに画像の説明を挿入します

以下のスクリーンショットに示すように、赤色の警告ログの詳細を表示します。

ここに画像の説明を挿入します

原因分析:

ヒント: ここに問題の分析を入力します。

[Vue 警告]: 不明なカスタム要素: - コンポーネントを正しく登録しましたか? 再帰コンポーネントの場合は
、必ず「name」オプションを指定してください。
…で見つかりました

ここに画像の説明を挿入します
エラーログ情報によると、ページに示されているように、コンポーネントに関連していることがわかります。

  <viewer>
                    <img
                      v-for="(srcImg,pics) in picImageList" :key="pics" :src="srcImg"
                      style="display: inline-block;width: calc(20% - 10px);cursor: pointer;margin: 5px;"
                    />
                  </viewer> ```

解決：

ヒント: この問題に対する具体的な解決策をここに記入してください:

エラーログ情報によると、コンポーネントに関連していることがわかりますので、

1. まずは使い方ページにコンポーネントが登録されているか確認する
2. コンポーネントの登録方法が正しいかどうか
3. コンポーネントを利用する際は、コンポーネントの導入とインスタンス化の順序に注意する
4. 注意する書かれた名前が一貫しているかどうか。

理由: このプロジェクトにはプラグインがインストールされていません

1、安装  <viewer>  插件
npm install v-viewer --save

2、在  main.js  文件中配置
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

3、引入组件
<script>
  import viewer from ''  //引入组件
</script>

4、在使用页面中注册组件
  components: {
        viewer  //注册组件
  },

今回は、使用したノードのバージョンがインストールビューアと競合するため、目的の機能を実現するために、このコンポーネントの代わりに他のコンポーネントが使用されます。

<el-image
          style="width: 100px; height: 100px"
          v-for="(srcImg, pics) in item.picImageList"
          :key="pics"
          crossorigin="anonymous"
          :src="srcImg"
          fit="contain"
          :preview-src-list="picImageList"
        ></el-image>

今度は問題が解決されました~~~

[Vue warn]: 不明なカスタム要素: <viewer> - コンポーネントは正しく登録されましたか? 再帰的の場合

プロジェクトのシナリオ:

問題の説明

原因分析:

解決：

おすすめ