0.1.6 • Published 11 months ago
zhzj_graph_com v0.1.6
zhzj_graph_com
智慧职教图谱样式组件
快速使用
安装组件
npm install zhzj_graph_com
引入组件及样式
import GeneralAtlas from "zhzj_graph_com" import "zhzj_graph_com/dist/zhzj_graph_com.css"
使用组件
全局引入 Vue.use(GeneralAtlas) 按需可在页面内引入
安装依赖
npm install
添加组件
在components中添加组件
注意:组件的name必须要写,组件调试好以后,必须在/components/index.js中引入
打包组件库
运行npm run build:com打包组件库源码,打包后的文件在dist文件夹里,
其中components-zhjy.umd.js和components-zhjy.css两个文件需要用到
(将这两个文件拷贝到项目中,main.js中引入,即可在项目中使用添加的组件)。
npm run build:com
组件调试
在与components平级的目录创建了一个项目,名为examples,用于本地调试组件源码,
我们已经在 -> examples -> src -> main.js里引入components-zhjy.umd.js和components-zhjy.css两个文件,
这样可以使我们在 -> examples -> src ->App.vue 中直接使用components中的组件
在终端进入examples文件夹,首次启动时npm install安装依赖,然后npm run serve启动examples,我们可以看到组件注册并使用成功。
NPM包发布
先运行npm run build:com打包组件库,才能发布npm包
npm网站注册账号(是否使用公司账号?) npm
运行npm login命令登录npm账号,按照提示输入用户名密码邮箱等信息
(如果设置了淘宝镜像,会登录不成功,要将镜像改为npm官方镜像 npm config set registry https://registry.npmjs.org 查看镜像 npm config get registry)
最后运行npm publish完成npm包发布
(如果包名已存在,会发布不成功,换包名:-> package.json -> name 修改name,
同时"main": "dist/components-zhjy.umd.js"也要修改成对应路径,main: 本包向外暴露的文件,很重要,一定要和你打包出来的文件名一模一样)
参考文档 来,体会一下npm包的发布、更新管理、使用——完整教程
npm login
npm publish
安装前改变源镜像 https://blog.csdn.net/zz00008888/article/details/130266808
在 npm login
时,报错 Unexpected token < in JSON at position 0 while parsing near '<!DOCTYPE HTML PUBLI...'
原因是发包时必须是 npm 官方镜像地址:
# 查看当前镜像地址
$ npm config get registry
# 修改 npm 源地址为官方源
$ npm config set registry https://registry.npmjs.org/ 弃用
$ npm config set registry https://registry.npmjs.com/ org可能连不上
# 将 npm 源地址修改为淘宝源(用于安装 npm 速度慢的时候使用)
$ npm config set registry https://registry.npm.taobao.org/
快速上手搭建VUE组件库
See 参考文档.