Vue 组件封装发布 npm 包（2023/03/17）

Hit不死的小强

已于 2023-05-23 17:29:07 修改

阅读量1.3k

点赞数

分类专栏：前端文章标签： vue.js npm javascript

于 2023-03-17 15:13:08 首次发布

本文链接：https://blog.csdn.net/qq_44797987/article/details/129621403

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue 组件封装发布 npm 包（2023/03/17）

文章目录

Vue 组件封装发布 npm 包（2023/03/17）

项目中经常遇到需要组件复用的情况，本文将介绍如何将 Vue 组件封装成 npm 包，并上传到 npm 私有仓库（本文不介绍 npm 私有仓库的搭建，请自行查阅相关资料）。

1. 前提条件

npm 私有仓库；
nodejs；
Vue；

2. 准备项目

2.1 创建 Vue 项目

通过 vue-cli 创建并初始化 vue2 项目；
```
$ vue create app
```

创建src/packages目录用来存放组件，项目整体目录结构如下；

app
├── README.md
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── packages
│   └── main.js
└── vue.config.js

2.2 编写组件

此处以简单的 HelloVue 组件为例，新建src/packages/hello-vue/index.vue文件，内容如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloVue",
  props: {
    msg: String
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2.3 测试组件

在src/App.vue中引入HelloVue组件测试能否正常使用，内容如下：

<template>
  <div id="app">
    <hello-vue msg="Hello, Vue!"></hello-vue>
  </div>
</template>

<script>
import HelloVue from "@/packages/hello-vue/index.vue";

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.4 编写打包入口文件

测试通过后，编写打包入口 js 文件，创建src/index.js文件，内容如下：

import HelloVue from "./packages/hello-vue/index.vue";

// 需要打包导出的组件
const components = [
    HelloVue
];

const install = function (Vue) {
    components.map(component => {
        Vue.component(component.name, component);
    });
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    name: "HelloVue",
    version: "1.0.0",
    install
};

2.5 编写 Readme

编写Readme.md文件内容，如插件使用方式等等。

3. 打包发布

3.1 非编译方式（推荐）

使用非编译的方式可以解决src/assets文件夹下静态文件依赖的问题，但无法解决public目录静态文件依赖问题（目前还没找到较好的解决办法）。

修改package.json文件，修改内容如下：

{
  "name": "@zhy/app", // 包名
  "version": "0.1.0", // 版本号，后续每次更新发布都要修改
  "private": false, // 必须修改为 false
  "description": "Hello Vue!", // 包描述
  "main": "./src/index.js" // 包入口文件
}

添加.npmignore文件，忽略不需要发布的文件，如配置文件等；

node_modules/

public/

src/components
src/App.vue
src/main.js

.gitignore

babel.config.js
jsconfig.json
package-lock.json
vue.config.js

.idea

登录私有仓库，此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/；

# 根据提示输入用户名密码登录
$ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/

发布到私有仓库；

# 发布
$ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/

# 从私有仓库删除（谨慎操作）
$ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/

3.2 编译方式

编译的方式可以对代码进行编译压缩，隐藏源码，但无法解决静态文件依赖的问题。

修改package.json文件，修改内容如下：

{
  "name": "@zhy/app", // 包名
  "version": "0.1.0", // 版本号，后续每次更新发布都要修改
  "private": false, // 必须修改为 false
  "description": "Hello Vue!", // 包描述
  "main": "./app/app.umd.js", // 包入口文件，对应打包后的目录
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    // 新增打包脚本，--name 打包后的名字，--dest 打包后的目录
    "package": "vue-cli-service build --target lib src/index.js --name app --dest app"
  }
}

打包编译；

# 成功后生成打包目录 app
$ npm run package

添加.npmignore文件，忽略不需要发布的文件，如配置文件等；

node_modules/

public/
src/

.gitignore
.npmignore

babel.config.js
jsconfig.json
package-lock.json
vue.config.js

.idea

登录私有仓库，此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/；

# 根据提示输入用户名密码登录
$ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/

发布到私有仓库；

# 发布
$ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/

# 从私有仓库删除（谨慎操作）
$ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/

4. 测试使用

创建并初始化 Vue 项目；
```
$ vue create test-app
```

安装依赖；

$ npm install @zhy/app --registry http://172.20.2.5:8081/repository/npm-hosted/

在src/main.js文件中注册插件;

import HelloVue from '@zhy/app';

Vue.use(HelloVue);

在App.vue中使用插件；

<template>
  <div id="app">
    <hello-vue msg="Hello Vue!"></hello-vue>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

参考资料: