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 组件名

查看更多关于新建组件

删除组件

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版本。

新建组件

在前端工程文件夹下执行。-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