qiz-comp-kanban-vue

柒志公司自定义开发的通用前端组件

安装依赖

npm install

编译

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

组件开发与使用

组件开发

目录规划

packages
        |-- api //系统公用的api接口调用js
        |-- components //自定义组件目录
                     |-- qiz-common //自定义的通用组件
                     |-- qiz-powergrid //电网项目/产品专用的组件
        |-- utils //js工具类
        |-- index.js //整合所有组件的js代码

定义新组件

• 自定义组件的目录名称采用驼峰式命名规则，首字母为小写，如：equipPopup
• 组件内的目录结构(equipPopup组件为示例)

equipPopup
        |-- src //存储组件代码
               |-- api //组件自有的api接口js定义目录，里面的js文件名称自定义
               |-- index.vue  //组件的vue模板代码
        |-- index.js //声明组件，将组件对外提供组件的引用

• 若组件内有业务独特的api调用接口，则在组件的api目录中进行定义
• 组件的名称必须以QIZ开头，定义在组件的index.vue中，名称与组件目录的名字保存一致，采用驼峰式，如：QIZEquipPopup

<script>
    export default {
        name: "QIZEquipPopup",

注意:发布之前先到examples文件夹注册组件验证，验证没问题之后再发布npm私库

组件发布至npm仓库

组件编写完成之后的npm推送

修改windows登录用户下的.npmrc文件，内容如下；

registry=http://192.168.2.211:8081/nexus/content/groups/npm-all/
[email protected]
always-auth=true
_auth="cWl6ZGVwbG95bWVudDpxaXpkZXBsb3ltZW50ITIzNA=="

修改vue组件开发项目中，推送私库的仓库地址 发布组件是推送到npm私库中，跟下载依赖组件的地址不一样，所以需要单独的配置，可以在前端组件项目中的package.json中配置发布的仓库地址

"publishConfig" : {
   "registry" : "http://192.168.2.211:8081/nexus/content/repositories/npm-internal/"
},

推送发布组件 进入你的工程目录，在package.json中设置好要发布的版本号，修改好之后执行以下指令完成推送。

npm publish

组件使用

第三方项目安装组件

npm install qiz-comp-authority-vue@版本号

目前平台的公用组件都集成在这一个包中

安装完依赖后在main.js全局注册组件

import qizCompAuthorityVue from 'qiz-comp-authority-vue'
Vue.use(qizCompAuthorityVue)