0.1.5 • Published 3 years ago
cvl-ui v0.1.5
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