mzzh-platform-components
v0.0.4
Published
vue3 components
Downloads
12
Maintainers
Readme
介绍
vue3.x + typescript + rollup 方式搭建的 vue 组件库,主要用于平台开发,包括form-schema,dynamic-table,uploader,verify等,后续还会持续补充。
软件架构
vue3 ts rollup 用于编译出 核心js文件 gulp 用于编译出 css
使用说明
- 该vue3项目可以是ts 也可以是js
- 安装完成后在main.js中添加如下代码
yarn add mzzh-platform-components -S
import bbq from 'mzzh-platform-components'
import 'mzzh-platform-components/lib/css/index.css'
const app = createApp(App)
app.use(bbq)
app.mount('#app')
自定义样式
因为该ui是用scss编译过来的,一般来说是引用编译后的css。 但是如果需要自定义某些样式的颜色的话,就需要引入为编译前的源文件 即scss,因为需要自行的覆盖掉一些全局属性来起到主题修改的效果。在使用自定义样式的方式有一个前提就是vue3项目中已经引入了sass依赖 控制台执行:
vue add style-resources-loader
npm install node-sass sass-loader sass -D
vue.config.js添加如下配置
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
}
}
样式覆盖流程如下 新建一个scss文件夹,例如myTheme.scss 该文件内容如下
//替换全局属性
$primaryColor : gold;
//引入编译前的scss源文件
@import "~mzzh-platform-components/src/scss/index";
然后main.js中引入ui组件的部分修改为
import bbq from 'mzzh-platform-components'
import "@/theme/myTheme.scss"