[Vue] vueのコンポーネント・デザイン

インストール

npm install [email protected] --save
npm i --save ant-design-vue@next

npm i --save ant-design-vue //目前使用的兼容版本"ant-design-vue": "^2.2.8",

プロジェクトはグローバルコンポーネントを導入します

よくある問題

避けるべきキーワード

検証例外の処理 es-link

エラー「HelloWorld」コンポーネントは登録されていますが、使用されていません vue/no-unused-components

スタックオーバーフロー

Ant ギャラリーが読み込まれていません

ギット

最後のコミットファイルに追加

使いやすい

カスタムコンポーネントヘッダー

コンポーネントは、小さなこぶ、大きなこぶ、 - リンク

ヘッダーコンポーネント

<template>
    <a-layout-header class="header">
        <div class="logo" />
        <a-menu
                theme="dark"
                mode="horizontal"
                v-model:selectedKeys="selectedKeys1"
                :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="1">nav 11</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
        </a-menu>
    </a-layout-header>
</template>

<script lang="ts">
    import {
    
     defineComponent } from 'vue';

    export default defineComponent({
    
    
        name: 'the-header'
    });
</script>

<style scoped>

</style>

参照コンポーネント

 <the-header></the-header>

<script lang="ts">
  import {
    
     defineComponent } from 'vue';
  import  TheHeader from '@/components/the-header.vue';
  export default defineComponent({
    
    
    name: 'app',
    components: {
    
    
      TheHeader,
    }
  });
</script>

リスト

質問を追加 ts タイプ

エラーメッセージがある場合、ts type any は js unlimited type になります。

アイコンアイコン

グローバルにインポートするにはmain.tsをインストールnpm install @ant-design/icons-vue --save
、公式ドキュメントでは一つずつトラブルを紹介する必要があるようです

import * as Icons from '@ant-design/icons-vue';

// createApp(App).use(store).use(router).use(Antd).mount('#app'); // 链式变动
const app = createApp(App);
app.use(store).use(router).use(Antd).mount('#app');

// 全局使用图标
const icons: any = Icons;
for (const i in icons) {
    
    
    app.component(i, icons[i]);
}