1、介绍

mpcui是uni-app生态组件库

本组件库使用与uni-app开发, 目前适配了全部h5和微信小程序端, 大部分的app端, 后续会陆续适配所有端。

1.1、快速开始

目前mpcui已经发布npm, 可以通过npm方式安装。

1. 安装命令: npm i -S @cci/mpcui 。
2. 在main.js加入以下代码:

import mpcui from "@cci/mpcui";

Vue.use(mpcui)

3. 在 pages.json 加入以下代码:

"easycom": {
 "autoscan": true,
 "custom": {
    "^mc-(.*)": "@cci/mpcui/components/mc-$1/mc-$1.vue"
 }
} 

4. 按以上步骤操作之后, 就相当于全局引入所有组件。所以组件都以mc-开头, 具体用法请参照文档。

2、新增组件开发流程

1. 在components文件夹下，新增组件文件夹
2. 在views文件夹下，新增组件示例展示页面，并在pages/index/index.vue 中新增示例组件配置，即可在本地启动项目查看效果并调试
3. 组件开发完成，发布组件库

2.1、组件命名规范

1. 组件新增目录建议 components/组件名称/组件名称.vue

2. 组件名称以 mc开头mc-button

3. 所有组件与属性名都是小写，单词之间以连字符-连接

   <component-name property1="value" property2="value">
   	content
   </component-name>

2.2、组件示例

template写法，template语法标签有限制，不像浏览器⼀样，有div span 等的。⽬前⼩程序有view,text,scroll-

view,swiper,cover-view,cover-image 等标签。

下面是一个基本组件的实例，在一个vue页面的根<view>组件下插入一个<button>组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。

注：按照vue单文件组件规范 (opens new window)，每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。

<template>
	<view>
		<button size="mini">按钮</button>
	</view>
</template>

2.3、组件库发布

# 发布流程

git add .
git cz
# 发布 - 自动修改版本号 + pull + push + publish
npm run vs

项目整体结构

.
├── App.vue
├── README.md
├── components                   # 组件目录
│   └── mc-button                # 示例button组件
│       └── mc-button.vue
├── index.html
├── logo.png
├── main.js
├── manifest.json
├── package.json
├── pages                         # 展示页面
│   └── index
│       └── index.vue
├── pages.json
├── static
│   ├── cha.png
│   └── logo.png
├── styles
│   ├── _vars.scss
│   ├── common.scss
│   ├── functions.scss
│   ├── mixin.scss
│   └── ui.scss
├── tree.text
├── uni.scss
└── views                         # 视图页面
    └── button
        └── index.vue