Zhzj_graph_com NPM

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/