cvl-ui

安装

npm install cvl-ui

使用

全局引入

// 引入样式
import "cvl-ui/dist/index.css";
// 引入组件
import cvui from "cvl-ui"
const app = createApp(App)
// 全局注册组件
app.use(cvui)
app.mount('#app')

按需引入

引入主题样式，在 vue.config.js 中导入ui样式：

// vue.config.js
module.exports = {
	css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~cvl-ui/src/style/global-import.scss";`
      }
    }
  }
}

安装 babel-plugin-import:

npm install babel-plugin-import -D

babel 配置文件 babel.config.js 中添加配置：

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
    ],
    plugins: [
        [
            'import',
            {
                "libraryName": "cvl-ui",
                "customName": (name) => {
                    return `cvl-ui/src/packages/${name}/index.ts`;
                }
            }
        ]
    ]
}

按需引入：

import {Input} from "cvl-ui";
app.use(Input);

按需引入的组件，经过 babbel-plugin-import 的转化，会变成下面的引入方式：

import Input from "cvl-ui/src/packages/input";

主题切换

新建主题样式文件（这里使用scss，并将样式文件放置src/style文件夹下）my-theme.scss，设置对应主题颜色：

$custom-theme: (
    '':(
            colorPrimary: #ff7934,
            colorSuccess: #67C23A,
            colorWarn: #E6A23C,
            colorError: #F56C6C,
            colorInfo:#909399,
    ),
    'blue':(
            colorPrimary: #409EFF,
            colorSuccess: #67C23A,
            colorWarn: #E6A23C,
            colorError: #F56C6C,
            colorInfo:#909399,
    ),
    'violet':(
            colorPrimary: #8A2BE2,
            colorSuccess: #4caf50,
            colorWarn: #ff9800,
            colorError: #e91e63,
            colorInfo:#000042,
    )
);

新建全局导入样式文件 global-import.scss，合并主题：

@import "~cvl-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;
    }
  }
}

修改全局样式导入文件：

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "src/style/global-import.scss";`
            },
        }
    },
}

不同模块的主题样式设置

刚才在$custom-theme.scss设置了不同的主题色，可以在模块或组件通过样式名设置对应主题：

<!-- 蓝色主题 theme-blue -->
<dl class="theme-blue">
    <dt>theme blue</dt>
    <dd>
        <cv-button v-for="item in ['primary','success','info','warn','error']" :label="item" :status="item" :key="item" />
    </dd>
</dl>

<!-- 紫罗兰色主题 theme-violet -->
<dl class="theme-violet">
    <dt>theme violet</dt>
    <dd>
        <cv-button v-for="item in ['primary','success','info','warn','error']" :label="item" :status="item" :key="item" />
    </dd>
</dl>

更多主题色变量可查看主题文件地址 ~cvl-ui/src/style/theme/default.scss