vue封装组件并发布到Npm

前言
vue 封装组件是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件使用，入element-ui这一类的组件库。

1、环境准备

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

（1）、初始化项目

vue create my-app

（2）、运行项目

npm run serve

2、组件封装

2.1 新建package文件夹

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

这里我打算封装连个组件：TestButton，TestInput两个vue文件

2.2 编写组件代码

这里就以TestButton为例任意编写一些代码

<template>
  <div>
    <img
      :src="require('../assets/logo.png')"
      alt="Vue logo"
    />
    <br>
    <button class="my-btn">打包测试</button>
  </div>
</template>

<script>
export default {
  name: 'TestButton', // 组件名称
  data() {
    return {}
  },
}
</script>

<style scoped>
.my-btn {
  color: red;
}
</style>

然后我们引用到App.vue组件里面验证一下，看是否组件可用，代码如下：

<template>
  <div id="app">
    <TestButton/>
    <TestInput/>
  </div>
</template>

<script>
import TestButton from './package/TestButton'
import TestInput from './package/TestInput'

export default {
  name: 'App',
  components: {
    TestButton,
    TestInput
  },
}
</script>

最终效果如下：

2.3 使用Vue插件模式

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

在package目录下新建index.js文件，代码如下：

import TestButton from './TestButton' // 引入封装好的组件
import TestInput from './TestInput'

const coms = [TestButton,TestInput]; // 将来如果有其它组件,都可以写到这个数组里
export default {
  install(Vue) { 
    coms.forEach((com) => { 
      Vue.component(com.name,com)
    })
  }
}

上传代码主要的的一项工作就是将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。

3、组件打包

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

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

 "package": "vue-cli-service build --target lib ./src/package/index.js --name test-ui --dest test-ui"

打包命令解释：

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

然后执行打包命令：

npm run package

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

4、初始化test-ui目录的 package.json

初始化package.json知道test-ui的入口文件，进入test-ui目录，执行命令：

npm init -y

由于这里我们只是测试，所以我不需要更改package.json文件，如果是生产的话，最好加上版本描述和版本号等等，其中name字段便是我们上传到npm仓库后的名称。

5、发布到npm

（1）注册账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

（2）设置npm源

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

npm config set registry=https://registry.npmjs.org

（3）添加npm用户

进入test-ui目录，添加npm用户，执行命令：

npm adduser

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

（4）发布npm

在test-ui目录下执行命令：

npm publish

如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm光网上查看自己发布得npm包。

6、从npm 安装使用

直接执行安装命令：

npm install test-ui

然后在main.js引用注册，代码如下：

import TestUi from '../test-ui' // 没有测试发布流程，所以采用的本地引入
import '../test-ui/test-ui.css'

Vue.use(TestUi)

修改App.vue文件，直接使用组件TESTButton，代码如下：

<template>
  <div id="app">
    <TestButton/>
    <TestInput/>
  </div>
</template>

<script>
// import TestButton from './package/TestButton'
// import TestInput from './package/TestInput'

export default {
  name: 'App',
  components: {
    // TestButton,
    // TestInput
  },
}
</script>

展示如下：

发现图片并没有成功引入，解决办法参考npm 发布包时，图片路径错误解决方案

以上就是vue封装组件并发布到npm的全流程。

参考文章：Vue封装组件并发布到npm仓库

posted @ 2023-06-07 17:40 webHYT 阅读(1864) 评论(0) 收藏举报

刷新页面返回顶部

webHYT