大同网站建设优化推广天津seo网站管理

背景

继《翻转组件库之打包》_杨晓风-linda的博客-CSDN博客之后，组件库已经可以正常构建，那如何像elementUI等组件库那样，用npm安装，按照既定的用法使用即可呢？本篇便为你揭晓

资料相关

1、npm官方文档：npm 中文文档 | npm 中文网

2、npm访问地址：npm

流程相关

1、package.json - 自定义设置

• 删除私有属性（本组件库属于第三方组件库）

private: true

npm包的发布依赖package.json,对此文件进行自定义设置

• 指定库的入口文件

"main": "dist/index.umd.js"

• 指定关键词，方便搜索

  "keywords": ["vue","ui"]

• 指定发布的文件目录和内容（没有必要所有的内容都发布）

  "files": ["dist","components"  // 方便用户查看源码，此文件夹内容可不发布]

2、登录npm

• npm login （若没有npm账号，需先注册）
• 输入用户名和密码即可

3、发布组件库

• npm publish

4、测试组件库

// 安装组件库
npm i component-lib-vue// 按需引入
import 'component-lib-vue/dist/css/card.css
import { Card } from 'component-lib-vue'
Vue.use(Card)

截止为止，组件库发布到npm相关的内容结束了，敬请期待搭建组件库文档站点...