Print

如何将Vue组件发布到npm并可以外链引入使用

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197102.html

目录文章目录
  1. 配置环境
  2. 封装组件
  3. Npm 发布
  4. npm 安装使用
  5. 外链引入
  6. 结语

如何将Vue组件发布到npm并可以外链引入使用 1

main.js

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

<template>
  <div >
    {{ 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

将webpack.config.js里的output修改为如下：

output: {
    filename: "index.js",
    library: "Modal",
    libraryTarget: "umd"
}

配置完之后就可以使用npx webpack打包，可以看到有一个dist目录，该目录下存在一个index.js, 这个文件就是我们封装的Tag.vue文件, 你可以将它引入到你的项目中，进行调用，该文件支持Es Module、CommonJs、AMD三种方式引入。

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 发布

如果没有npm账号呢，先去官网注册一个npm账号这里

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

在终端执行npm init -y ，进行初始package.json文件，主要信息就是 name 和 main 字段，前者是这个包的名称(也就是 npm instal xxx)，后者则是我们打包好的文件Tag文件，默认main就去找这个入口文件。

注意：包名称不能包含大写，包名称不能包含大写，包名称不能包含大写，重要的事情说三遍！

{
  "name": "custom-tag-mybj",
  "version": "1.0.0",
  "description": "这是 xxxx",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "mybj",
  "license": "ISC"
}

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

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

注册完之后，执行npm login, 依次填写你的用户名、密码、邮箱，

执行npm publish发布，然后等待进度条完成即可。

整理一些常见的发布错误

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

no_perms Private mode enable, only admin can publish this module

一般是没有登录，重新登录一下 npm login 即可：

npm publish failed put 500 unexpected status code 401

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

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

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

you must verify your email before publishing a new package

npm 安装使用

cnpm i custom-tag-mybj -D

main.js

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)
})

到此为止就完成了一个组件的打包上传下载，这样我们在每个项目需要的时候直接npm install安装就行，当需求改动的时候只改一个文件然后再次发布就行。是不是很方便啦。

外链引入

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

import 引入

<template>
  <div >
    <TagEl/>
  </div>
</template>

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

</style>

上面例子中，我们看到直接引入了index.js文件并进行注册组件，直接就可以使用啦。

script 引入

<!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>

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

export default {
  name: "Tag"
}

结语

以上就是今天的技术笔记，关于如何将 Vue 组件发布到 npm 且可以外链引入使用，相信大家看完本文后能够有体会。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/