0.1.5 • Published 2 years ago
ztf_test_package_process v0.1.5
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=qiz@qiz.com 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)