hqit-component

结构

1├─.gitignore
2├─.npmignore
3├─package-lock.json
4├─package.json
5├─README.md
6├─lib                              ## 主要目录
7|  ├─index.js                      ## 入口文件
8|  ├─utils                         ## 工具函数
9|  |   ├─auth.js
10|  |   ├─drag.js
11|  |   └tools.js
12|  ├─component                     ## 封装组件文件夹
13|  |     ├─index.js                ## 统一导出组件
14|  |     ├─hqitButton.vue          ## 按钮
15|  |     ├─hqitForm.vue            ## 表单
16|  |     ├─hqitInput.vue           ## 输入框
17|  |     ├─hqitStepsForm.vue       ## 分步表单
18|  |     ├─hqitSwitch.vue          ## 开关
19|  |     ├─hqitTreeSelect          ## 树选择器（组织选择器），后期可能增加配置，因此用文件夹
20|  |     |       └index.vue
21|  |     ├─hqitTree                ## 组织树（展示）
22|  |     |    └index.vue
23|  |     ├─hqitTable               ## 列表
24|  |     |     └index.vue
25|  |     ├─hqitSelect              ## 选择器
26|  |     |     └index.vue
27|  |     ├─hqitProSelect           ## 列表选择器（人员选择器）
28|  |     |       ├─config.js
29|  |     |       └index.vue
30|  |     ├─hqitDialog              ## 对话框
31|  |     |     └index.vue
32|  |     ├─common                  ## 内部公用组件，不对外暴露
33|  |     |   └searchForm.vue
34|  ├─assets                        ## 存放样式、字体文件
35|  |   ├─element-variables.scss
36|  |   ├─hqit.scss                
37|  |   ├─reset.scss
38|  |   ├─fonts                     ##图标、字体
39|  |   |   ├─element-icons.ttf
40|  |   |   ├─element-icons.woff
41|  |   |   ├─customIcon
42|  ├─api                           ## 请求相关函数
43|  |  ├─loading.js
44|  |  ├─request-normal.js
45|  |  ├─request.js
46|  |  ├─system                     ## api地址
47|  |  |   ├─data.js
48|  |  |   └index.js
49├─doc                              ## 使用文档
50|  ├─hqit-choose.md
51|  ├─hqit-dialog.md
52|  ├─hqit-table.md
53|  ├─hqit-tree.md
54|  └基础组件.md

安装

npm install hqit-component

本地调试

• 当前component

1cd lib
2npm link

• 测试项目

npm link hqit-component

publish

1. 设置仓库地址

    npm config set registry https://registry.npmjs.org/
   

2. 登陆npm，输入登录信息

   npm login
   

3. 修改版本信息，package.json中version

4. 执行

   npm publish
   

隐藏源码发布

1. 修改版本信息
2. 执行npm run build
3. 执行 npm publish

** 注意：发布打包后的代码，在项目里使用要单独引入css**

1
2import "hqit-component/dist/index.css"; 
3import hqitComponent from "hqit-component";
4Vue.use(hqitComponent, {
5  baseUrl: "http://124.227.1.175:9998",
6});
7

全局css变量

lib/assets/element-variables.scss

项目中使用

1@import "hqit-component/lib/assets/element-variables.scss";
2
3.text-primary{
4    color:$--color-primary
5}

1import colors from "hqit-component/lib/assets/element-variables.scss";