前言 我们为什么要写个组件上传到npm镜像上呢，我们肯定遇到过这样一个场景，项目中有很多地方与某个功能相似，你想到的肯定是把该功能封装成Component组件，后续方便我们调用。但是过了一段…

                                                                                                                                                                                    #### 前言

我们为什么要写个组件上传到

1
npm

镜像上呢，我们肯定遇到过这样一个场景，项目中有很多地方与某个功能相似，你想到的肯定是把该功能封装成
1
Component

组件，后续方便我们调用。但是过了一段时间，你的
1
Leader

让你去开发另一个项目，结果你在哪个项目中又看见了类似的功能，你这时会怎么做? 你也可以使用
1
Ctrl + c + v

大法，拿过来上一个项目封装好的代码，但是如果需求有些变动，你得维护两套项目的代码，甚至以后更多的项目….，这时你就可以封装一个功能上传到你们公司内网的
1
npm

上(或者自己的账号上)，这样每次遇到类似的功能直接
1
npm install

安装
1
import

导入进来使用就可以，需求有变动时完全可以改动一处代码。

配置环境

笔者这里使用的是

1
Webpack

配置(有点菜，不要介意)，也可以安装一个
1
Vue-cli

简单版的，它那里面有暴露
1
Webpack

的配置(也得修改自行配置)，我们来配置一下打包组件环境，一般开发组件库都是使用的
1
umd

格式，这种格式支持
1
Es Module

、
1
CommonJs

、
1
AMD

三种引入方式使用，主要就是
1
Webpack

里的
1
library

和
1
libraryTarget

，如果不明白的看这里详解webpack的out.libraryTarget属性

项目结构
1
2
3
4
5
6
7
8
  |- /node_modules
|- /src
   |- Tag.vue
   |- main.js
|- index.html
|- webpack.config.js
|- package.json

初始化Package.json
1
2
npm init -y

安装Webpack && Loader && Plugin
1
2
3
4
5
6
  cnpm i webpack webpack-cli -D
cnpm i css-loader style-loader -D
cnpm i file-loader -D
cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
cnpm i html-webpack-plugin@3.2.0 -D

css-loader style-loader 配置

1
.css

文件及样式使用
file-loader 配置特殊字体和图片使用
vue-loader 处理
1
.vue

文件后缀
vue 使用Vue语法
vue-template-compiler 处理
1
.vue

文件里的
1
template

模板语法

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]  
            },
            {
                test: /\.(ttf|eot|woff|svg|woff2)/,
                use: "file-loader"
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}

index.html
1
2
3
4
5
6
7
8
9
10
11
12
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</html>

以上我们基本环境就搭建完啦，可以在终端使用

1
npx webpack

运行看看哦。

封装组件

我这里只做一个示例哈，代码就不写那么复杂，大家知道怎么打包使用就行，具体封装成啥样看你们公司需求啦。笔者这里使用

1
Element Ui

组件来做一个示例，相信大部分小伙伴公司也在使用
1
Element Ui

。假如我们项目中有以下类似的功能就可以单独封装起来。
![Test](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2b20b215853416f9e5823a577973610tplv-k3u1fbpfcp-zoom-1.image ‘手把手教你写一个Vue组件发布到npm且可外链引入使用’)

main.js
1
2
3
4
5
6
  import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
export default Tag

Tag.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  <template>
  <div class="Tag">
    {{ msg }}
    <el-tag type="success">标签二</el-tag>
  </div>
</template>

<script>
export default {
 name: 'Tag',
  data() {
    return {
        msg: "hello 蛙人",
    }
  },
  created() {
  },
  components: {},
  watch: {},
  methods: {
  }
}
</script>
<style scoped>

</style>


Webpack.config.js

将

1
webpack.config.js

里的
1
output

修改为如下

1
2
3
4
5
6
  output: {
    filename: "index.js",
    library: "Modal",
    libraryTarget: "umd"
}

配置完之后就可以使用

1
npx webpack

打包，可以看到有一个
1
dist

目录，该目录下存在一个
1
index.js

, 这个文件就是我们封装的
1
Tag.vue

文件, 你可以将它引入到你的项目中，进行调用，该文件支持
1
Es Module

、
1
CommonJs

、
1
AMD

三种方式引入。

1
2
3
4
5
6
7
8
9
10
  import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
import CustomTag from "./index" // 打包完的，直接引入进来
new Vue({
    el: "#app",
    render: h => h(CustomTag)
})

Npm发布

如果没有

1
npm

账号呢，先去官网注册一个
1
npm

账号这里

新建一个发布包项目文件夹

在终端执行

1
npm init -y

，进行初始
1
package.json

文件，主要信息就是name和main字段，前者是这个包的名称(也就是npm instal xxx)，后者则是我们打包好的文件
1
Tag

文件，默认
1
main

就去找这个入口文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
  {
  "name": "custom-tag-waren",
  "version": "1.0.0",
  "description": "这是xxxx",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "WaRen",
  "license": "ISC"
}

如果淘宝镜像之前被更改，先改回来执行以下命令

1
2
npm config set registry http://registry.npmjs.org

注册完之后，执行

1
npm login

, 依次填写你的
1
用户名

、
1
密码

、
1
邮箱

执行

1
npm publish

发布，然后等待进度条完成即可。

整理一些常见的发布错误

这是因为镜像设置成淘宝镜像了，设置回来即可

1
2
no_perms Private mode enable, only admin can publish this module

一般是没有登录，重新登录一下

1
npm login

即可

1
2
npm publish failed put 500 unexpected status code 401

包名被占用，改个包名即可，最好在官网查一下是否有包名被占用，之后再重命名

1
2
npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?

邮箱未验证，去官网验证一下邮箱

1
2
you must verify your email before publishing a new package

npm安装使用

1
2
cnpm i custom-tag-waren -D

main.js
1
2
3
4
5
6
7
8
9
10
  import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTagWaren from "custom-tag-waren"  // 下载完引入进来
Vue.component(Tag.name, Tag)
new Vue({
    el: "#app",
    render: h => h(customTagWaren)
})

到此为止就完成了一个组件的打包上传下载，这样我们在每个项目需要的时候直接

1
npm install

安装就行，当需求改动的时候只改一个文件然后再次发布就行。是不是很方便啦。

外链引入

我们也不上传

1
npm

上，直接使用外链的形式使用，下面我们来看看

import引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <template>
  <div class="Tag">
    <TagEl/>
  </div>
</template>

<script>
import TagEl from "./index"
export default {
 name: 'Tag',
  data() {
    return {
       
    }
  },
  components: {
      TagEl
  },
}
</script>
<style scoped>

</style>

上面

1
example

中，我们看到直接引入了
1
index.js

文件并进行注册组件，直接就可以使用啦。

script引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Tag/>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="text/javascript" src="./dist/index.js"></script>
</body>
<script>
    new Vue({
        el: "#app",
        components: {
            Tag: Tag.default
        }
    })
</script>
</html>

上面

1
example

中，直接使用
1
script

标签引入进来，也是注册完使用就可以。那么我们怎么知道他名字是Tag，这个你在封装组件的使用，必须指定Name名称。

1
2
3
4
  export default {
	name: "Tag"
}

感谢

谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。
我是蛙人(✿◡‿◡)，如果觉得写得可以的话，请点个赞吧❤。
感兴趣的小伙伴可以加入 [ 前端娱乐圈交流群 ] 欢迎大家一起来交流讨论
写作不易，「点赞」+「在看」+「转发」 谢谢支持❤

往期好文

《分享12个Webpack中常用的Loader》
《聊聊什么是CommonJs和Es Module及它们的区别》
《带你轻松理解数据结构之Map》
《这些工作中用到的JavaScript小技巧你都知道吗？》
《【建议收藏】分享一些工作中常用的Git命令及特殊问题场景怎么解决》
《你真的了解ES6中的函数特性么？》

参考

https://blog.csdn.net/weixin_43606158/article/details/1068086

本文标题： 手把手教你写一个Vue组件发布到npm且可外链引入使用

本文作者： OSChina

发布时间： 2021年04月15日 09:46

最后更新： 2025年04月03日 11:07

原始链接： https://haoxiang.eu.org/5777c75f/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码