mzzh-platform-components v0.0.4

介绍

vue3.x + typescript + rollup 方式搭建的 vue 组件库,主要用于平台开发，包括form-schema，dynamic-table，uploader，verify等，后续还会持续补充。

软件架构

vue3 ts rollup 用于编译出 核心js文件 gulp 用于编译出 css

使用说明

1. 该vue3项目可以是ts 也可以是js
2. 安装完成后在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"