wt-ui

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

开发前必读

强烈推荐使用 VSCODE 编译器 并且安装 Vetur,VSLive Share,ESLint这三个插件, 尤其是ESLint, 方便自动lint并格式化

✨ 新建组件

为了统一目录结构,新建组件一律使用如下命令:

npm run new:comp
新增组件，需要修改doc.md文件顶部的版本号为将要发布的版本号

更新组件到依赖库（文档中可现实）

npm run update:comp

组件内统一采用css modules书写样式, 并遵循BEM规范, 请确保添加module属性在style标签上，

组件内部使用的变量方法名等，均使用下划线开头命名，并且不记录到doc.md中

✨ 组件配置文件 (index.json)

支持的参数列表如下:

| 参数 | 默认值 | 类型 | 说明 | | :-------: | :----- | :------ | --------------------------- | | 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"
    }
  ]
}

✨ 更新组件库及菜单

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字段，否者将会被自动清除掉

✨ 组件文档书写

所有组件文档即demo，统一写在对应组件包下的doc.md文件内

如果是组件示例及其demo需要用如下使用结构：

:::demo 这里可以跟上示例描述

    示例代码

:::

组件实例的样式，用内联在doc.md文件内示例代码前即可 为了更加规范，我们统一将样式写在上述的示例代码前，```html后，并且样式统一添加doc-前缀

下面是一个完整的书写示例，其中用两个星号包裹可让文字看起来更突出

:::demo size 接收String类型，值为 medium 时显示中号字号，值为 large 时显示大号字号。

    <style>
        .doc-wt-col{
            
        }
    </style>
    <wt-col class="doc-wt-col">
        <div slot="head">title</div>
        <div class="doc-content">content</div>
        <div class="doc-footer">footer</div>
    </wt-col>

:::

✨ 样式

组件库通用样式：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字段

✨ 发布新版本

1.更改package.json中版本号 2.检查是否有新增组件，如果有，将其doc.md文件顶部的版本号改为最新的版本号 3.命令行登录具有管理权限的npm账户（已登录跳过），如果没有权限，需要登录公司npm账户，邀请加入项目 4.执行npm publish

✨ 官网更新

将最新代码合并到master分支，将会自动打包，并部署官网，如果没有更新成功，检查自动打包部署是否成功

##组件依赖 安装wt-ui1.0以上的版本，需引入‘wt-ui/pc’的情况，必须先引入“webpack-transform-modules-plugin”。并在项目文件“vue.config”中配置 const Transform = require('webpack-transform-modules-plugin') configureWebpack: { plugins: [ new Transform() ], resolve:... }