proudsmart-ui v0.2.1

proudsmartUI

目录结构

• build： 存放构建相关的文件
• config： 构建相关配置
• doc： 组件介绍、使用文档
• examples：存放组件库的展示demo和文档的所有相关文件。也是运行npm run dev之后打开的页面。理论上，应该是一个组件对应一个界面，现在缺少挺多的，待完善。
• lib： 打包后的文件，包括js和css
• packages: 所有的组件
• packages/styles: 所有的样式文件
• publish： 发布到npm是需要的相关文件，一般不用修改
• src： 管理组件的注册的主入口，工具，mixins等
• static： vue-cli生成的，暂时没有什么用处
• test： 测试相关，暂时没有用到
• .babelrc： babel的配置文件
• editorconfig： 编辑器的配置文件
• eslintignore、.eslint.js： eslint相关配置
• .gitignore： git相关配置
• .postcssrc.js： postcss配置

如何新增组件

以新增表格组件Grid为例

• 在packages下，新建grid/Grid.vue文件。文件中包括Grid组件的html结构和js逻辑。
• 在packages/styles下，新建grid.scss文件，该文件是Grid组件的样式
• 在packages/styles/index.scss中，引入grid.scss。

@import "grid";

• 在src/index.js中注册Grid组件。

...
import Grid from './../packages/grid/Grid';
...

const install = function (Vue) {
  ...
  Vue.component(Grid.name, Grid);
  ...
};

...
export {..., Grid};
...

为什么不在组件中写样式，而要把样式单独写？

考虑到按需引入。这样，如果单独引入某一个组件，可以只引入对应的样式，而不用引入全部的样式。

packages/styles下居然还有package.json这些东西，为什么？

同上个问题。考虑到按需引入，这里，对样式文件用gulp进行了单独打包，单独发布。所以，从git把代码down下来之后，不仅需要在根目录下执行npm i，还需要在packages/styles下执行npm i。

样式中是什么鬼？@b，@e，@m，@when等等这是什么玩意？

样式使用的是BEM风格的命名，写了mixin(packages/styles/src/mixins/bem-mixin.scss)做了一些封装。这个mixin是参照 这篇文章 做的。

当然，开发组件时，不一定非要按照这一套规矩来，但是，一定要把你用的规范、风格找地方记录好。

package.json中那么多scripts，都干啥的？

1. dev、 start： 运行examples的。examples中，一方面作为demo和文档存在，同时，开发组件时，也可以作为开发页面，在这里查看开发的组件。
2. unit、test： 单元测试相关的，现在还没用到
3. lint： 检测代码格式的
4. build:proudsmart-ui、build:proudsmart-ui-css、build:examples、build、 build:all： 打包用的。第一个是打包js的。第二个打包css样式。 第三个打包demo文档的。第四个打包js和css的，是第一个和第二个命令的组合。最后一个命令，是第一个、第二个、第三个命令的组合。
5. changeJsVersion、 changeCssVersion： 改变package.json和packages/styles/packages.json中的版本。因为往npm发布包的时候，版本号必要要比前一个版本号大。
6. publish:all ： 打包js和css，并发布到npm上。
7. prepublish:all：发布前钩子，验证当前分支是否在develop分支，验证当前分支是否落后于develop分支，验证当前版本是否是最新版本。若三者有一个未通过，则拒绝发布。
8. docBuild、 docServer：查看组件库的文档。文档用gitbook管理。docBuild输出打包后的文件，docServer则可在浏览器中实时查看markdown文件编译的结果。

发布到npm后，如何使用？

• 安装

npm install proudsmart-ui --save

• 全包引入

import ProudsmartUI from 'proudsmart-ui';
// 引入样式
import 'proudsmart-ui/lib/proudsmart-ui-css/index.min.css'; 
// 或者
import 'proudsmart-ui/lib/proudsmart-ui-css/themes/default/index.min.css';

Vue.use(ProudsmartUI); //显式调用Vue.use

• 按需引入

/*
 * 只引入Button组件
 */
import { Button } from 'proudsmart-ui';
import 'proudsmart-ui/lib/proudsmart-ui-css/button.css'; // 引入样式
Vue.component(Button.name, Button); //显式调用Vue.use