Vue封装组件并发布到npm仓库

1. 环境准备

因为我们此次封装的是Vue组件,所以我们直接在Vue脚手架项目里面进行封装即可。

(1)初始化Vue项目

vue create lin-vue

(2)运行项目

npm run serve

2. 组件封装

  • 新建src/components文件夹

因为我们可能会封装多个组件,所以在src下面新建一个package文件夹用来存放所有需要上传的组件。

  • 编写组件代码
  • examples为测试目录,然后我们引用到App.vue组件里面验证一下,可以验证组件

2.3 使用Vue插件模式

这一步是封装组件中的重点,用到了Vue提供的一个公开方法:install。这个方法会在你使用Vue.use(plugin)时被调用,这样使得我们的插件注册到了全局,在子组件的任何地方都可以使用。

在src目录下新建index.js文件,代码如下:

javascript 复制代码
import LButton from "./components/button/index.vue";
import LInput from "./components/input";

const components = [LButton, LInput];

const install = function (Vue) {
  if (install.installed) return;
  components.forEach((component) => Vue.component(component.name, component));
};

// 判断是否是直接引入文件,如果是,就不用调用 Vue.use()
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

const API = {
  version: process.env.VERSION, // eslint-disable-line no-undef
  install,
  ...components,
};

export default API; // eslint-disable-line no-undef

3. 组件打包

到这里为止,我们的组件封建基本就完成了,当然组件封装成什么样得看自己得业务需求了,接下来我们就需要将组件进行打包了。

修改我们项目得package.json文件,配置打包命令:

javascript 复制代码
 "lib": "vue-cli-service build --target lib src/index.js --name lview --dest lib"

打包命令解释:

  • --target lib 关键字 指定打包的目录
  • --name 打包后的文件名字
  • --dest 打包后的文件夹的名称

其它参数说明:

  • name:引入时的使用的组件名称
  • version:每次发布新版本时,必须更改版本号,不然推送会失败
  • main:组件的入口
  • publishConfig:私库地址

然后执行打包命令:

javascript 复制代码
npm run lib

打包执行完成后我们项目目录下就会多出一个lib文件夹,存放的是打包后的文件。

4.2 发布到npm仓库

(1)注册账号

想要发布到npm仓库,就必须要有一个账号,先去npm官网注册一个账号,注意记住用户名、密码和邮箱,发布的时候可能会用到,创建对应的公有组织(私有的要收费)

(2)设置npm源

有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的,如果想要发布npm包,我们得吧我们得npm源切换为官方得源,命令如下:

javascript 复制代码
npm config set registry=https://registry.npmjs.org

(3)登录npm

进入根目录目录,执行命令,运行登录命令之后输入 NPM 账号密码邮件

javascript 复制代码
npm login
Username: lin
Password: 
Email: (this IS public) xxxxx@163.com
Logged in as lin on https://registry.npmjs.org/.

这里会让你填写用户名等等,如果之前设置过即可跳过此步。

(4)发布npm

在pig-ui目录下执行命令:

javascript 复制代码
npm publish

//发布失败的话请使用一下命令
npm publish --access=public

4.3 发布到nexus私有仓库

搭建nexus仓库,设置好账号

javascript 复制代码
    npm config set registry https://nexus.uddun.com/repository/group-npm/
    npm login -registry=https://nexus.uddun.com/repository/local-npm/
    -- Username: lin
    -- Password: ***
    -- email :xxx@163.com
    package.json --> version   +0.0.1    // 修改版本号
    npm run lib  // 打包组件
    npm publish  // 发布组件

5. 从npm安装使用

如果是私库的话,需要配置私库地址,在根目录添加.npmrc文件,内容如下:

javascript 复制代码
registry=https://nexus.uddun.com/repository/group-npm/
@lin-ui:registry=https://nexus.uddun.com/repository/group-npm/

然后在main.js引用注册,代码如下:

直接执行安装命令:

javascript 复制代码
npm install @lin-ui/lview
javascript 复制代码
import Lview from "@lin-ui/lview";
import "@lin-ui/lview/lib/lview.css";
Vue.use(Lview );

这里单独引用了css,就和element-ui一样需要单独引入样式文件。

相关推荐
沉默璇年33 分钟前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder39 分钟前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
会发光的猪。1 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记2 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安2 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼2 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
周全全2 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式