• Vite2 按需引入


    Vite2 按需引入 Ant Design Vue 与 element-plus 还有 vant UI框架

    这两个文档内按需引入这块,看不太懂于是在github issues上找了一下
    目前为止比较好的解决办法,推荐第一种

    第一种

    注意⚠️有个问题:如果不引入所有组件的css,部分组件样式不全。
    https://github.com/onebay/vite-plugin-imp
    css也可以按需引入

    # ./vite.config.js 文件
    
    import vue from '@vitejs/plugin-vue'
    import vitePluginImp from 'vite-plugin-imp'
    
    /**
     * https://vitejs.dev/config/
     * @type {import('vite').UserConfig}
     */
    export default {
        plugins: [
            vue(),
            vitePluginImp({
                libList: [
                    {
                        libName: 'vant',
                        style(name) {
                            if (/CompWithoutStyleFile/i.test(name)) {
                                // This will not import any style file
                                return false
                            }
                            return `vant/es/${name}/index.css`
                        }
                    },
                    {
                        libName: 'ant-design-vue',
                        style(name) {
                            if (/popconfirm/.test(name)) {
                                // support multiple style file path to import
                                return [
                                    'ant-design-vue/es/button/style/index.css',
                                    'ant-design-vue/es/popover/style/index.css'
                                ]
                            }
                            return `ant-design-vue/es/${name}/style/index.css`
                        }
                    },
                    {
                        libName: 'element-plus',
                        style: (name) => {
                            return `element-plus/lib/theme-chalk/${name}.css`
                        }
                    }
                ]
            })]
    }
    
    # ./src/main.js 文件
    import { createApp } from 'vue'
    import App from './App.vue'
    
    import { Button } from 'ant-design-vue';
    
    const app = createApp(App);
    
    const antd = [
        Button,
    ]
    antd.forEach(plugin => {
        app.use(plugin)
    })
    
    app.use(Button);
    app.mount('#app')
    
    

    图片alt

    第二种

    css不会按需引入
    https://github.com/wingsico/vite-babel-plugin

    引入button

    图片alt

    全量引入

    图片alt

  • 相关阅读:
    动态创建DeepZoom
    MultiSheet Excel Output
    PL/SQL Developer设置技巧
    采购审批专题总结bob
    oracle dbms包和其他包的使用大全
    ARAuto Invoice question
    应收发票相关 脚本
    发运确认停靠站错误
    让R12直接从Form登录
    查找事物处理来源
  • 原文地址:https://www.cnblogs.com/kousum/p/14394021.html
Copyright © 2020-2023  润新知