Vue 组件封装发布 npm 包(2023/03/17)
文章目录
- Vue 组件封装发布 npm 包(2023/03/17)
- 1. 前提条件
- 2. 准备项目
- 2.1 创建 Vue 项目
- 2.2 编写组件
- 2.3 测试组件
- 2.4 编写打包入口文件
- 2.5 编写 Readme
- 3. 打包发布
- 3.1 非编译方式(推荐)
- 3.2 编译方式
- 4. 测试使用
项目中经常遇到需要组件复用的情况,本文将介绍如何将 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>
参考资料:
- Vue封装组件并发布到npm仓库 - 掘金 (juejin.cn)
- 封装Vue组件并发布到npm(完美解决组件中的静态文件引用) - 浅笑· - 博客园 (cnblogs.com)
- Vue封装组件并发布到npm仓库-阿里云开发者社区 (aliyun.com)