vue3-keep-ui

使用说明

1.先进行安装， vue3-keep-ui
2.注册使用

2-1 注册全局
    在main.ts中
    import vue3KeepUi from 'vue3-keep-ui';
    import 'vue3-keep-ui/dist/index.css';
    createApp(App).use(vue3KeepUi).mount('#app');
    
2-2 按需引入  
    首先这里借助插件和一些配置才能做到按需引入
    第一步：安装babel-plugin-import -D 
    第二步：配置babel.config.js
    plugins: [
        [
            'import',
            {
                "libraryName": "vue3-keep-ui",
                "customName": (name) => {
                    return `vue3-keep-ui/src/packages/${name}/index.ts`;
                }
            }
        ]
    ]
    第三步：配置vue.config.js
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "~vue3-keep-ui/src/style/global-import.scss";`
            }
        }
    }
    
    备注：这里是借助了babel-plugin-import的按需加载机制，配合上vue3-keep-ui中的一个全局样式scss文件来做按需引入的。

扩展说明

• 1.作为用户，我想自己定义一个主题怎么办？
  • (ps: $前面的斜杠是markdown转译的，其实代码中不存在)

    只需要简单几步就可以实现用户自己定义的主题
    1.1自己在src下面建立一个style文件夹里面编写一个global-import.scss（模仿vue3-keep-ui/src/style/global-import.scss的写即可），一个my-theme.scss
    // global-import.scss
    @import "~vue3-keep-ui/src/style/main";
    @import "./my-theme";
    $themes: map_merge($theme-default, $custom-theme); 
    @mixin theme {
        @each $curThemeName, $curTheme in $themes {
            @include generateThemeContent($curThemeName, $curTheme) {
                @content;
            }
        }
    }
    // my-theme.scss 主要就是利用主题的替换原则
    $custom-theme: (
        '':(
            colorPrimary: #ff4040,
            colorSuccess: #f5c30a,
            colorWarn: #092eea,
            colorError: #04ee62,
            colorInfo:#c705ff,

            shapeFillet:4px,
        ),
        'blue':(
            colorPrimary: #409EFF,
            colorSuccess: #67C23A,
            colorWarn: #E6A23C,
            colorError: #F56C6C,
            colorInfo:#909399,

            shapeFillet:4px,
        ),
        'violet':(
            colorPrimary: #8A2BE2,
            colorSuccess: #4caf50,
            colorWarn: #ff9800,
            colorError: #e91e63,
            colorInfo:#000042,

            shapeFillet:8px,
        )
    );
    1.2 修改vue.config.js，因为最开始是直接使用的vue3-keep-ui的主题配置，所以要修改成自己的
    module.exports = {
        css: {
            loaderOptions: {
                sass: {
                    prependData: `@import "src/style/global-import.scss";`
                }
            }
        }
    }

• 2.只有一个主题不够？局部多主题了解一下。

    如1添加自定义主题，我们添加了三个主题，分别是默认、theme-blue、theme-violet
    在代码中
    <div><v3-button/></div> 
    <div class="theme-blue"><v3-button/></div> 
    <div class="theme-violet"><v3-button/></div> 
    分别展示的是三个主题颜色的按钮，同一个页面展示你的多种自定义主题。
    

• 3.组件库组件不够用，开发者自己扩展开发组件，做主题的兼容
  • 1.这个designComponent是为了给vue的defineComponent添加更完备的校验扩展的一个方法
  • 2.classes一定要v3-开头吗？
    • 这个问题取决于开发者，如果index.scss用 statusMixin 那么久v3开头
    • 如果不想v3开头而是自定义，建议自己写一个statusMixin方法覆盖组件库的statusMixin方法
    • status的状态主题中包含5中，分别是primary、success、error、info、warn

    文件结构 card/index.tsx card/index.scss
    例如：自定义一个card组件
    // index.tsx
    import { designComponent } from 'vue3-keep-ui/src/use/designComponent';
    import { computed } from 'vue';
    import './index.scss';
    
    const Card = designComponent({
        name: 'my-card',
        props: {
            status: {type: String, default: 'primary'}
        },
        setup(props) {
    
            const classes = computed(() => [
                'v3-my-card',
                `v3-my-card-status-${props.status}`
            ])
    
            return {
                render() {
                    return (
                        <div class={classes.value}>
                            <div class="card-title">card-title</div>
                            <div class="card-content">card-content</div>
                        </div>
                    )
                }
            }
        }
    })
   
    export default Card;
    
    // index.scss
    @include theme {
      .v3-my-card {
        display: inline-block;
    
        .card-title {
          padding: 8px 16px;
        }
    
        .card-content {
          padding: 20px 16px;
        }
    
        @include statusMixin(my-card) {
          border: solid $value;
          margin: 8px;
          .card-title {
            background-color: $value;
            color: white;
          }
        }
      }
    }