封装一个组件库并上传到npm

小白11111
1,024 阅读3分钟

b站学了总结的

怎样封装一个组件库并上传到npm

当所有的组件已经写好了以后，想要封装成一个库并上传到npm上>

一、封装组件库

1.在根目录下新建一个packages文件夹，用来放组件 1.如果有图标，把图标的文件夹fonts移进去,打包好会显示在dist/.css后缀文件里面

  1. 在packages文件夹里面创建一个index.js文件作为整个包的入口， cn.vuejs.org/v2/api/#Vue…。

为组件提供 install 方法，供组件对外按需引入 看到网上介绍：vue提供install可供我们开发新的插件及全局注册组件等
install方法第一个参数是vue的构造器，第二个参数是可选的选项对象

    1. 在index.js里面引入所有用到的组件，全局注册组件。封装成install方法导出!
    1. 判断是否直接引入文件，如果是，就不用调用Vue.use()。如果全局引入的vue，全局里面有vue的话，直接叫install把vue传进来，直接全局注册好这些组件!
    1. 导出install
install export default { install }
  1. 在需要引用的项目里面的main.js进行插件引用。使用这个index.js入口文件。当你暴露了install，Vue.use一个对象的时候，会自动找到index.js最下面的install方法去执行。
/src/main.js
import HeimaUI from '../packages/index.js'
Vue.use(HeimaUI)
  1. 需要用到插件的组件里面直接引用
<template>
  <div id="app">
    <hm-button type="primary">按钮</hm-button>
  </div>
</template>

\

二、上传到npm

对package进行打包，得知道vue-cli有一个构建目标，

cli.vuejs.org/zh/guide/bu…

  1. 在package.json中添加打包成库的命令。指定package/index.js这个入口文件构建成一个库

2.执行 yarn lib对package/index.js进行打包,打包成功会生成一个dist文件夹

 yarn lib

umd是通用的js规范

3.让github管理项目，把dist包丢到npm上

*1.要想把项目发到npm上去，得把package.json里面的private值设置为false

*2.包的入口文件一定要找dist/youhu-ui.umd.js这个文件才行，所以在package.json中添加 main:"dist/youhu-ui.umd. min .js" ,这样写的话默认导入就是导入 youhu-ui.umd.js 导出的东西

也可以指定包的作者等等

3.还要在youhu-ui里面添加 .npmignore的文件,忽略掉一些东西，不被npm上传，用户只下载dist包就够了，

4.如果装了nrm的，得保证当前的源必须是npm (nrm类似于管理node的nvm),

*1. 执行nrm ls 命令

nrm ls

*2.执行nrm use npm 命令 使用npm才行

nrm use npm

*3.执行npm login 如果没有npm账号就去官网注册，然后跟着提示填写账号密码一次性验证码

npm login

5.项目的名字要独一无二才能上传成功

6.完成以上步骤就可以在npm上找到我的包了

后续如果要继续往里面加组件，在packages里面加就行，

加完以后在index.js里面统一导出，然后在src里面可以做测试，先在里面写好组件添加到packages里面，

测试：新创建一个脚手架文件，在终端上执行命令yarn add youhu-ui就可以测试包是不是存在以及使用了

yarn add youhu-ui

node_modules里面就可以使用啦

2.然后引入+使用就可以用这个包l

3.然后就可以把APP.vue里面的代码粘贴到demo里面yarn serve测试一下啦

5.就可以使用成功！然后可以引入样式，import 'youhu-ui/dist/youhu-ui.css',样式就出来了，可能有偏差，后续过来改

以下是在操作过程中出现的问题

Mac系统下安装nrm后执行nrm ls命令:-bash: nrm: command not found 解决方法如下:

  1. sudo npm install nrm -g
  2. 输入开机密码
  3. nrm ls

使用yarn add命令报错：Missing list of packages to add to your project

改为yarn或者yarn install就可以了。 因为yarn里面根本就没有yarn add 这个单独的命令，yarn add后面必须跟包名，不能单独使用。

avatar
文章
阅读
粉丝