care-ui

项目树形结构图如下：

care-ui
├─ lib                                     // 打包后的资源文件
├─ public
│    └─ index.html
├─ src
│    ├─ care
│    │    ├─ lib
│    │    │    ├─ care-ui.css               // 打包后未压缩的css
│    │    │    └─ care-ui.min.css           // 打包后已压缩的css
│    │    │    └─ care-ui.min.wxss          // 打包后已压缩的wxss
│    │    │    └─ care-ui-mixin.scss        // 额外供项目使用的mixin样式，非必引样式
│    │    └─ src
│    │         ├─ base
│    │         │    ├─ animate              // 动画样式
│    │         │    ├─ mixin                // 混合样式
│    │         │    ├─ theme                // 主题包，全局变量
│    │         │    ├─ variable             // 组件变量
│    │         │    ├─ reset.scss           // 重置样式
│    │         │    └─ index.scss           // base入口文件
│    │         ├─ components                // 组件样式
│    │         ├─ demo                      // 示例文件
│    │         └─ care-ui.scss                // UI组件入口文件
│    │    ├─ gulpfile.js                    // gulp打包文件
│    │    ├─ package-lock.json
│    │    └─ package.json
│    ├─ pages
│    │    ├─ components                     // 组件结构示例
│    │    └─ index.vue                      // 组件目录文件
│    ├─ static
│    │    └─ logo.png
│    ├─ App.vue                             // 根组件
│    ├─ main.js                             // 入口文件
│    ├─ pages.json                          // 配置路由和全局样式应用文件
│    ├─ manifest.json                       // 配置项目打包信息
│    └─ uni.scss                            // uniapp内置常用变量
├─ package.json
├─ postcss.config.js
├─ README.md
├─ babel.config.js
├─ tsconfig.json
└─ yarn.lock

依赖安装

第一步：进入/src/careui目录，执行yarn install 或 npm install安装依赖 第二步：在项目根目录上执行yarn install 或 npm install安装依赖

h5运行开发环境

第一步：运行 npm run dev:style 打包并监听样式文件 第二步：运行 npm run dev:h5 启动开发环境

h5运行生产环境

npm run build:h5

微信小程序运行开发环境

第一步：运行 npm run dev:style 打包并监听样式文件 第二步：运行 npm run dev:mp-weixin 启动开发环境

微信小程序运行生产环境

npm run build:mp-weixin

发布h5线上测试环境

运行 npm run dev:publish 发布资源文件到线上 线上测试预览地址 https://static.wecity.qq.com/careui-toC/index.html

案例参考

BEM规范 前端通用UI组件 weUI VantUI TDesign-主题文件设计内容整理

常见问题

一、执行打包命令后出现 primordials is not defined 等关于gulp问题的错误 解决方法一：本地node版本大于10，将node版本降级为10即可

二、Error: Missing binding 在 /src/careui 目录里执行 npm rebuild node-sass 即可