vue常用组件库无非这些，一直在思索一个问题，组件能否条件编译，类似于客户端或者服务器的，在编译期去除，打包就会被忽略
因此尝试在一个自定义的脚手架内，引入了3套组件库，实现了在 .env 声明组件库可动态编译的效果
# ant-design 组件库
VUE_APP_UI_ANT_DESIGN = 'ant-design'
# quasar 组件库
VUE_APP_UI_QUASAR = 'quasar'
# element-ui 组件库
VUE_APP_UI_ELEMENT = 'element'
# 编译组件选择: FIXME:若不生效多刷新几次main.js即可
VUE_APP_PLATFORM = ['ant-design', 'quasar', 'element']
# 若同时存在多个组件库, 公共引用优先库
VUE_APP_IF_COMP = "ant-design"
# 骨架屏优先选择项: 骨架屏 Loading 时还不能获取到对象 native
VUE_APP_PRIORITY = ''
也配置了按需加载和主题配置，记录下整理过程
主题重置
若是配置成功，无需单独引入样式
若是配置成功，重置配置变量会被覆盖
首页和官网一致，vue cli3 环境
按需引入依赖 babel 和各组件库依赖的chunk：babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
"@babel/syntax-dynamic-import" /*异步加载*/,
[
"transform-imports",
{
quasar: {
transform: "quasar/dist/babel-transforms/imports.js",
preventFullImport: true
}
}
],
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
],
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
};
- ant design 配置
-
npm i ant-design-vue 生产依赖
-
npm i -D babel-plugin-import 开发依赖，用于chunk按需引入的组件，非全量引入组件库
-
配置统一的组件导入入口，结合条件编译可实现不同包切换，详见 vue-mcli
import Vue from "vue";
import { Button } from "ant-design-vue";
const antDesign = {
install: function(Vue) {
// 按需引入组件库
Vue.use(Button);
}
};
/* 使用 Vue.use() 方法默认会调用 install 方法 */
Vue.use(antDesign);
- 统一配置主题重置，将组件引入和主题配色分文件管理，在
main.js统一引入
// theme 源至 variables.styl
@colorTheme: #565c63;
// reset theme
@primary-color: @colorTheme;
@link-color: #030303;
@border-radius-base: '2px';
// reset css
ant design 使用less loader在vue.config.js内配置条件编译, 无需再此处重新引入
// == ant-design 主题覆盖 less (条件编译) == //
let antDesignVariables = {};
/* IFTRUE_ANT_DESIGN */
antDesignVariables = {
modifyVars: {
hack: `true; @import "~@/styles/loader/ant-design.variables";`
},
javascriptEnabled: true
};
/* FITRUE_ANT_DESIGN */
---
// css配置: 自动加载 loaderOptions 对 stylus 和 less 都无效
css: {
extract: true,
sourceMap: false,
loaderOptions: {
// 自动加载仅导入主题: less sass stylus 方式不相同 - 细节详见 README.md
stylus: {
import: "~@/styles/loader/variables"
},
postcss: {
plugins: [
//基准大小 baseSize，需要和flexRem.js中相同
px2rem({
remUnit: _env.VUE_APP_REM_UNIT
})
]
},
less: antDesignVariables
}
},
- elemet-ui 配置
-
npm i element-ui 生产依赖
-
npm i -D babel-plugin-component 开发依赖，用于chunk按需引入的组件，非全量引入组件库
-
配置统一的组件导入入口，结合条件编译可实现不同包切换，详见 vue-mcli
import Vue from "vue";
// 按需引入不需要全局引入 element-css: 配置成功引入会报错
import {
Button
} from "element-ui";
const elementui = {
install: function(Vue) {
// 按需引入组件库
Vue.use(Button);
}
};
/* 使用 Vue.use() 方法默认会调用 install 方法 */
Vue.use(elementui);
// 全局插件和自定义指令
import { Loading, MessageBox, Notification, Message } from "element-ui";
// element-ui loading指令
Vue.use(Loading.directive);
// element-ui 服务模式
Vue.prototype.$el_loading = Loading.service;
Vue.prototype.$el_msgboxEl = MessageBox;
Vue.prototype.$el_alert = MessageBox.alert;
Vue.prototype.$el_confirm = MessageBox.confirm;
Vue.prototype.$el_prompt = MessageBox.prompt;
Vue.prototype.$el_notify = Notification;
Vue.prototype.$el_message = Message;
- 统一配置主题重置，将组件引入和主题配色分文件管理，在
main.js统一引入
重置主题需要引入: 改变 icon 字体路径变量和主题色 -- 组件样式已被chalk
// theme: 源至 variables.styl
$_color-theme: #565c63;
$_color-menu: #98a0ae;
$_color-table: #fafafa;
$_color-active: #2d3543;
$_color-before: SlateGray;
// reset theme
$--color-primary: $_color-theme;
/* 重置主题需要引入: 改变 icon 字体路径变量和主题色 -- 组件样式已被chalk */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
// reset css
// 级联菜单: 暂无数据默认高度
.el-cascader-panel {
height: 48px;
}
// 侧边栏
.el-aside,
.el-header,
.el-menu-item,
.el-submenu__title {
background-color: $_color-theme;
}
.el-menu-item,
.el-submenu__title {
color: $_color-menu;
}
.el-submenu .el-menu-item {
min-width: 0;
}
.el-menu-item.is-active {
color: #fff;
}
.el-menu-item:hover,
.el-submenu__title:hover,
.el-menu-item.is-active {
background-color: $_color-active;
}
.el-menu {
border-right: none;
}
// 侧边栏激活状态
.el-submenu {
position: relative;
}
.el-submenu.is-active::before {
content: " ";
position: absolute;
left: 0;
top: 6px;
z-index: 1;
height: 40px;
width: 4px;
border-radius: 0 4px 4px 0;
overflow: hidden;
background-color: $_color-before;
}
// 分页组件
.el-pager li.active:last-child {
margin-right: 0;
}
.el-pager li {
margin-right: 10px;
border-radius: 4px;
font-weight: 400;
}
.el-pager li.active {
background-color: $_color-theme;
color: #fff;
}
// 去掉tab底部分割线
.el-tabs__nav-wrap::after {
background-color: transparent;
}
- quasar 配置
-
npm add quasar
-
配置统一的组件导入入口，结合条件编译可实现不同包切换，详见 vue-mcli
import Vue from "vue";
import langZH from "quasar/lang/zh-hans";
import "quasar/dist/quasar.ie.polyfills";
import "@quasar/extras/material-icons/material-icons.css";
import {
QBtn,
} from "quasar";
Vue.use(Quasar, {
config: {},
components: {
QBtn
},
directives: { Ripple },
plugins: { Loading, Notify, Dialog },
lang: langZH
});
- 统一配置主题重置，将组件引入和主题配色分文件管理，在
main.js统一引入
重置主题需要引入: 覆盖性重置 -- 不能修改文件名称和路径: loader对路径做了绑定和优化, 需要引入才会生效 //
// 不能修改文件名称和路径: loader对路径做了绑定和优化, 需要引入才会生效 //
// 主题色: vue add quasar 自动添加
$primary = $-color-theme
$secondary = #26A69A
$accent = #9C27B0
$dark = #1D1D1D
$positive = #21BA45
$negative = #C10015
$info = #31CCEC
$warning = #F2C037
@import '~quasar-variables-styl'
// import && reset quasar
@import '~quasar-styl'
reset-h(fz)
line-height: 1.5
font-weight: normal
font-size: unit(fz, 'px')
h1
reset-h(28)
h2
reset-h(24)
h3
reset-h(20)
h4
reset-h(18)
h5
reset-h(16)
h6
reset-h(14)
p
margin: 0
// calendar 导航标题
.q-date__header-subtitle
font-size: 18px
.q-date__header-title-label
font-size: 22px
// dialog
.text-h4
reset-h(22)
.q-dialog__title
font-size: 20px
line-height: 2.3
.q-icon
font-size: 18px !important
// 强制全局才有效: no-shadow 和 flat 都无效: 设置底部
.q-menu
box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -10px rgba(0, 0, 0, 0.12) !important
网友评论