## Project setup ``` npm install ```
npm install wt-ui
npm install
`$3
`
npm run serve
`$3
`
npm run build
`$3
`
npm run test
`$3
`
npm run lint
`$3
`
npm run test:unit
`开发前必读
强烈推荐使用 VSCODE 编译器 并且安装
Vetur,VSLive Share,ESLint这三个插件, 尤其是ESLint, 方便自动lint并格式化$3
为了统一目录结构,新建组件一律使用如下命令:
`shell
npm run new:comp
新增组件,需要修改doc.md文件顶部的版本号为将要发布的版本号
`
更新组件到依赖库(文档中可现实)
`
npm run update:comp`> 组件内统一采用css modules书写样式, 并遵循BEM规范, 请确保添加module属性在style标签上,
> 组件内部使用的变量方法名等,均使用下划线开头命名,并且不记录到doc.md中
$3
支持的参数列表如下:
| 参数 | 默认值 | 类型 | 说明 |
| :-------: | :----- | :------ | --------------------------- |
| dev | true | Boolean | 是否开发中,为
true时, 将不会纳入最终的导出包中 |
| prototype | false | Boolean | 是否需要绑定到 vue 原型 |
| map | [] | Array | 绑定到原型的映射数组,采用(仅prototype为ture生效) |
| platform | '' | String | 指定组件类别[微信组件,移动端组件,pc端组件],["wechat","mobile","pc"] |
| dependencies | [] | Array | 组件依赖的其它资源,比如element-ui |`
// index.json示例:
{
"dev": false,
"prototype": true,
"platform": "wechat",
"dependencies":['element-ui'],
"map": [
{
"key": "$msgbox",
"value": "${moduleName}"
},
{
"key": "$alert",
"value": "${moduleName}.alert"
},
{
"key": "$confirm",
"value": "${moduleName}.confirm"
},
{
"key": "$prompt",
"value": "${moduleName}.prompt"
}
]
}
`$3
`shell
npm run update:comp
`该命令会检索lib/package目录下各个组件内的inde.json配置中的dev字段,如果dev为true,则会跳过该组件,否则,将会引入到lib/index.js,并从中导出
结果会生成一个lib/index.js文件,同时更新src/router/nav.config.js
注:你仍然可以向nav.config.js中手动添加自己的路由,但必须要有component字段,否者将会被自动清除掉
$3
所有组件文档即demo,统一写在对应组件包下的doc.md文件内
如果是组件示例及其demo需要用如下使用结构:
:::demo 这里可以跟上示例描述
`html
示例代码
`
:::组件实例的样式,用内联在doc.md文件内示例代码前即可
为了更加规范,我们统一将样式写在上述的示例代码前,
`html后,并且样式统一添加doc-前缀下面是一个完整的书写示例,其中用两个星号包裹可让文字看起来更突出
:::demo size 接收String类型,值为 medium 时显示中号字号,值为 large 时显示大号字号。
`html
title
content
``:::
组件库通用样式:lib/less
组件库官网通用样式:src/less
官网组件样式统一使用css module
组件库组件样式 禁止 使用css module
注:组件库下doc.md文件的demo中,使用的样式来来自于内嵌的style标签和官网通用样式(即src/less/common.less)
为了统一提交的代码风格,我们使用了git pre-commit hook做了强制代码检查并自动修复,除此之外,在检查前,还调用了update:comp命令,避免协同中的疏忽
于此同时,这会导致部分不合格的提交失败,此时,请查看detai信息
具体调用的命令集合及其顺序,可参见package.json pre-commit字段
##组件依赖
安装wt-ui1.0以上的版本,需引入‘wt-ui/pc’的情况,必须先引入“webpack-transform-modules-plugin”。并在项目文件“vue.config”中配置
const Transform = require('webpack-transform-modules-plugin')
configureWebpack: {
plugins: [
new Transform()
],
resolve:...
}