0.1.7 • Published 1 year ago
zhang-cui v0.1.7
1、介绍
mpcui是uni-app生态组件库
本组件库使用与uni-app开发, 目前适配了全部h5和微信小程序端, 大部分的app端, 后续会陆续适配所有端。
1.1、快速开始
目前mpcui
已经发布npm
, 可以通过npm
方式安装。
- 安装命令:
npm i -S @cci/mpcui
。 - 在
main.js
加入以下代码:
import mpcui from "@cci/mpcui";
Vue.use(mpcui)
- 在 pages.json 加入以下代码:
"easycom": {
"autoscan": true,
"custom": {
"^mc-(.*)": "@cci/mpcui/components/mc-$1/mc-$1.vue"
}
}
- 按以上步骤操作之后, 就相当于全局引入所有组件。所以组件都以
mc-
开头, 具体用法请参照文档。
2、新增组件开发流程
- 在components文件夹下,新增组件文件夹
- 在views文件夹下,新增组件示例展示页面,并在pages/index/index.vue 中新增示例组件配置,即可在本地启动项目查看效果并调试
- 组件开发完成,发布组件库
2.1、组件命名规范
组件新增目录建议
components/组件名称/组件名称.vue
组件名称以 mc开头
mc-button
所有组件与属性名都是小写,单词之间以连字符
-
连接<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