# web-components


### 安装

建议clone到前端工程的node_modules目录里

 > git clone https://git.taovip.com/yunge/web-components.git

### 初始化脚本

进入web-components文件夹，

> cd web-components

如果 -g 需要加 sudo权限的，则执行下面这个。

 > npm run init-sudo

不需要的sudo的，执行下面的脚本安装依赖包,

  > npm run init

### 可以开始开发一个新组件啦

在前端工程文件夹下

> cpt-cli g 组件名

*[查看更多关于新建组件](#new)*

删除组件

> cpt-cli rm 组件名

#### 启动

 > npm start

----------

## cpt-cli命令行

在执行cpt-cli命令时，会去寻找web-components的根目录，然后根据路径,执行对应的文件操作。所以git clone 工程时候，最好放到 node_modules中

查找规则如下， *防止过多的遍历，当前只找3个层级*

- 向上查找 ../web-components  -> ../../web-components -> ...类推
- 向下查找 ./web-components -> ./node_modules/web-components -> ./node_modules/node_modules/web-components 类推

对应的命令

- cpt-cli update 。 更新命令行工具
- cpt-cli g <组件名> 。新建组件
- cpt-cli rm <组件名> 。删除组件,即移除 ./src/components/<组件名> 组件
- cpt-cli index 更新索引文件。 即更新web-components/index.html 中组件的目录链接
- cpt-cli build 打包。使用webpack.config.pro.js的配置打包导出dist版本。

### <a name='new'>新建组件</a>

在前端工程文件夹下执行。-t参数可选，默认是vue组件，*注：组件不能重名*

> cpt-cli g <组件名> -t [vue 或 jquery]

等待重新build完成之后，进入该组件的文件夹

> ./src/components/<组件名>

可以看到这个结构（vue版本）：

  - index.js  索引文件。这样可以直接 require('<组件名>/') 而不是 require('<组件名>/<组件名>.vue')
  - <组建名>.vue  vue组件核心文件。
  - demo.html 演示demo页面。同时也用于组件开发中，查看样式，debug等等。 打开 http://localhost:9000/ , 从列表上找到刚新建的 <组件名>,点击打开之后的页面就是对应这个页面
  - mainifies.json 包含组件信息的文件。
    - name 组件名
    - version 版本号
    - description 组件的简单描述
    - createTime 创建时间
    - modifiedTime 修改记录对象。key记录修改时间和value修改信息。（注：应由git hooks，待开发，目前没用）
      - 修改时间 : 修改信息
    - type 组件分类。比如按钮，输入，表单等..
    - dependencies 组件的核心依赖库名称。当前只有vue和jquery的区分,在使用命令创建组件会自动生成。

#### vue文件 详解

正常的vue组件文件，包含template,script,style-sass.

script 中 export 的是vue组件一个对象。其props后续会在 demo.html中使用到。在demo.html中会解析这个props，以表格UI的形式表示出该组件的具体的入参。

#### demo.html 详解

demo展示的页面。在本地开发时候已经引入了依赖和hot-reload。*(注：修改demo.html页面中的script标签里的代码不会重新加载。)*

组件本身展示有关的，比如该组件的不同参数有完全不一样的样式和交互，在demo.html中都要体现处理。

####License
GPL