hqit-component

结构

bash

├─.gitignore

├─.npmignore

├─package-lock.json

├─package.json

├─README.md

├─lib                              ## 主要目录

|  ├─index.js                      ## 入口文件

|  ├─utils                         ## 工具函数

|  |   ├─auth.js

|  |   ├─drag.js

|  |   └tools.js

|  ├─component                     ## 封装组件文件夹

|  |     ├─index.js                ## 统一导出组件

|  |     ├─hqitButton.vue          ## 按钮

|  |     ├─hqitForm.vue            ## 表单

|  |     ├─hqitInput.vue           ## 输入框

|  |     ├─hqitStepsForm.vue       ## 分步表单

|  |     ├─hqitSwitch.vue          ## 开关

|  |     ├─hqitTreeSelect          ## 树选择器（组织选择器），后期可能增加配置，因此用文件夹

|  |     |       └index.vue

|  |     ├─hqitTree                ## 组织树（展示）

|  |     |    └index.vue

|  |     ├─hqitTable               ## 列表

|  |     |     └index.vue

|  |     ├─hqitSelect              ## 选择器

|  |     |     └index.vue

|  |     ├─hqitProSelect           ## 列表选择器（人员选择器）

|  |     |       ├─config.js

|  |     |       └index.vue

|  |     ├─hqitDialog              ## 对话框

|  |     |     └index.vue

|  |     ├─common                  ## 内部公用组件，不对外暴露

|  |     |   └searchForm.vue

|  ├─assets                        ## 存放样式、字体文件

|  |   ├─element-variables.scss

|  |   ├─hqit.scss                

|  |   ├─reset.scss

|  |   ├─fonts                     ##图标、字体

|  |   |   ├─element-icons.ttf

|  |   |   ├─element-icons.woff

|  |   |   ├─customIcon

|  ├─api                           ## 请求相关函数

|  |  ├─loading.js

|  |  ├─request-normal.js

|  |  ├─request.js

|  |  ├─system                     ## api地址

|  |  |   ├─data.js

|  |  |   └index.js

├─doc                              ## 使用文档

|  ├─hqit-choose.md

|  ├─hqit-dialog.md

|  ├─hqit-table.md

|  ├─hqit-tree.md

|  └基础组件.md







安装



npm install hqit-component









本地调试



- 当前component

bash

cd lib

package.json -> "main": "lib/index.js",

npm 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

js



import "hqit-component/dist/index.css"; 

import hqitComponent from "hqit-component";

Vue.use(hqitComponent, {

  baseUrl: "http://124.227.1.175:9998",

});



   



   







全局css变量



lib/assets/element-variables.scss



项目中使用

scss

@import "hqit-component/lib/assets/element-variables.scss";



.text-primary{

    color:$--color-primary

}

js

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

hqit-component

结构

bash

├─.gitignore

├─.npmignore

├─package-lock.json

├─package.json

├─README.md

├─lib                              ## 主要目录

|  ├─index.js                      ## 入口文件

|  ├─utils                         ## 工具函数

|  |   ├─auth.js

|  |   ├─drag.js

|  |   └tools.js

|  ├─component                     ## 封装组件文件夹

|  |     ├─index.js                ## 统一导出组件

|  |     ├─hqitButton.vue          ## 按钮

|  |     ├─hqitForm.vue            ## 表单

|  |     ├─hqitInput.vue           ## 输入框

|  |     ├─hqitStepsForm.vue       ## 分步表单

|  |     ├─hqitSwitch.vue          ## 开关

|  |     ├─hqitTreeSelect          ## 树选择器（组织选择器），后期可能增加配置，因此用文件夹

|  |     |       └index.vue

|  |     ├─hqitTree                ## 组织树（展示）

|  |     |    └index.vue

|  |     ├─hqitTable               ## 列表

|  |     |     └index.vue

|  |     ├─hqitSelect              ## 选择器

|  |     |     └index.vue

|  |     ├─hqitProSelect           ## 列表选择器（人员选择器）

|  |     |       ├─config.js

|  |     |       └index.vue

|  |     ├─hqitDialog              ## 对话框

|  |     |     └index.vue

|  |     ├─common                  ## 内部公用组件，不对外暴露

|  |     |   └searchForm.vue

|  ├─assets                        ## 存放样式、字体文件

|  |   ├─element-variables.scss

|  |   ├─hqit.scss                

|  |   ├─reset.scss

|  |   ├─fonts                     ##图标、字体

|  |   |   ├─element-icons.ttf

|  |   |   ├─element-icons.woff

|  |   |   ├─customIcon

|  ├─api                           ## 请求相关函数

|  |  ├─loading.js

|  |  ├─request-normal.js

|  |  ├─request.js

|  |  ├─system                     ## api地址

|  |  |   ├─data.js

|  |  |   └index.js

├─doc                              ## 使用文档

|  ├─hqit-choose.md

|  ├─hqit-dialog.md

|  ├─hqit-table.md

|  ├─hqit-tree.md

|  └基础组件.md







安装



npm install hqit-component









本地调试



- 当前component

bash

cd lib

package.json -> "main": "lib/index.js",

npm 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

js



import "hqit-component/dist/index.css"; 

import hqitComponent from "hqit-component";

Vue.use(hqitComponent, {

  baseUrl: "http://124.227.1.175:9998",

});



   



   







全局css变量



lib/assets/element-variables.scss



项目中使用

scss

@import "hqit-component/lib/assets/element-variables.scss";



.text-primary{

    color:$--color-primary

}

js

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