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

1.认识npm

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

使用Vue框架进行开发，组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用，比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同，开发人员还是得必须封装自己得组件，如果换了一个项目，那么我们就只能复制组件代码到新的项目里面去了，这样稍显麻烦，其实我们可以将组建上传到npm仓库，要用的时候可以直接从npm安装使用。

总结下来有两点好处：

• 方面使用，任何项目无缝衔接。
• 可作为开源项目，积累经验。

2.创建脚手架

   vue create my-app

3.运行项目

npm run serve

4. 封装组件

   1.在 /src/packages/index.vue 创建封装组件

 2.写入封装代码

<template>
  <div class="btn">第一个包成功</div>
  <el-button type="primary" @click="sunmit">测试包</el-button>
</template>

<script>
export default {
  name: 'df-button'
}
</script>
<script setup>
const sunmit = () => {
  alert('运行逻辑')
}
</script>

<style scoped>
.btn {
  color: blue;
  font-size: 23px;
}
</style>

3.因为到时候下载会进行use函数所以先创建并且导出install方法  /src/packages/index.js

 4.index.js写入代码

//package/index.js
import PigButton from "../packages/index.vue"; // 引入封装好的组件
const coms = [PigButton]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
    coms.forEach((com) => {
        Vue.component(com.name, com);
    });
};

export default install; // 这个方法以后再使用的时候可以被use调用

5. 进行打包 package.json添加这条命令进行打包 路径对应

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

成功：

 2. cd  df-ui文件夹执行创建npm

npm init -y

6.发布到npm仓库

1.注册账号

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

2.设置npm源

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

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

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

npm adduser

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

4. 发布npm

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

npm publish

7.更新包

1.首先修改package.json文件中的版本 version：xxx

在线执行 npm publish即可

8.删除包

npm unpublish 包名

如果权限不够加上 --force

二次封装直接导入当前element组件就可以勒，等到时候用户下载依赖项全局之后我这边也能访问了其实就是一个组件。

注意：

1.刚刚切换勒npm镜像下载特别慢

2.要切换回来

npm config set registry https://registry.npm.taobao.org

3.必须用官网镜像才可以上传切回去了更新要切回来

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

4.用户引用得名为全局注册组件得名字

5.下载最好用yarn

6.引用css要用打包这个名字

 import 'dfcorona/dFcorona.css'