乐趣区

关于javascript:Vite集成antdv并配置按需加载

官网文档

  • antdv 官网 https://2x.antdv.com/docs/vue…
  • unplugin-vue-components 按需导入插件 https://www.npmjs.com/package…

装置 antdv

yarn add ant-design-vue@next

Vite 配置按需导入

  1. 装置 vite 按需导入插件 yarn add -D unplugin-vue-components;vite-plugin-components插件已 renamed to unplugin-vue-components
  2. 配置 vite.config.js:

    import {defineConfig} from 'vite'
    import vue from '@vitejs/plugin-vue'
    import Components from 'unplugin-vue-components/vite'
    import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
    
    // https://vitejs.dev/config/
    export default defineConfig({
    plugins: [vue(),
     Components({
     resolvers: [AntDesignVueResolver()
     ],
     dts: true, // enabled by default if `typescript` is installed
     })
    ]
    })
    
  3. 组件无需导入应用 (import HelloWorld 被正文)

    <script setup>
    // This starter template is using Vue 3 <script setup> SFCs
    // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
    // import HelloWorld from './components/HelloWorld.vue'
    </script>
    
    <template>
     <img alt="Vue logo" src="./assets/logo.png" />
     <HelloWorld msg="Hello Vue 3 + Vite" />
     <p> 按需导入 </p>
    </template>
    
    <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>
退出移动版