手把手教你写一个Vue组件发布到npm且可外链引入运用
前言
咱们为何要写个组件上传到npm镜像上呢，咱们肯定遇到过这般一个场景，项目中有非常多地区与某个功能类似，你想到的肯定是把该功能封装成Component组件，后续方便咱们调用。然则过了一段时间，你的Leader让你去研发另一个项目，结果你在哪个项目中又看见了类似的功能，你此时会怎么做? 你亦能够运用Ctrl + c + v大法，拿过来上一个项目封装好的代码，然则倘若需求有些变动，你得守护两套项目的代码，乃至以后更加多的项目....，此时你就能够封装一个功能上传到你们机构内网的npm上(或自己的账号上)，这般每次遇到类似的功能直接npm install 安装import导入进来运用就能够，需求有变动时完全能够改动一处代码。
配置环境
笔者这儿运用的是Webpack配置(有点菜，不要介意)，亦能够安装一个Vue-cli简单版的，它那里面有暴露Webpack的配置(亦得修改自动配置)，咱们来配置一下打包组件环境，通常研发组件库都是运用的umd格式，这种格式支持Es Module、CommonJs、AMD三种引入方式运用，重点便是Webpack里的library和libraryTarget，倘若不明白的看这儿详解webpack的out.libraryTarget属性
我这儿的Webpack版本为4, 最好跟着本章里的插件版本号进行安装，避免显现版本兼容问题
项目结构|- /node_modules
|- /src
|- Tag.vue
|- main.js
|- index.html
|- webpack.config.js
|- package.json
复制代码初始化Package.jsonnpm init -y
复制代码安装Webpack && Loader && Plugincnpm 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 配置.css文件及样式运用file-loader 配置特殊字体和照片运用vue-loader 处理.vue文件后缀vue 运用Vue语法vue-template-compiler 处理.vue文件里的template模板语法webpack.config.jsconst VueLoaderPlugin = require(vue-loader/lib/plugin)
constHtmlWebpackPlugin =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<!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>
复制代码以上咱们基本环境就搭建完啦，能够在终端运用npx webpack运行瞧瞧哦。
封装组件
我这儿只做一个示例哈，代码就不写那样繁杂，大众晓得怎么打包运用就行，详细封装成啥样看你们机构需求啦~。笔者这儿运用Element Ui组件来做一个示例，相信大部分小伙伴机构亦在运用Element Ui。假如咱们项目中有以下类似的功能就能够单独封装起来。
main.jsimport Vue from vue
import { Tag } from element-ui;
import element-ui/lib/theme-chalk/tag.css;
import customTag from "./Tag.vue"
Vue.component(Tag.name, Tag)
export default customTag
复制代码Tag.vue<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
将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-waren",
"version": "1.0.0","description": "这是xxxx",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "WaRen",
"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-waren -D
复制代码main.jsimport 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)
newVue({el: "#app",
render: h => h(customTagWaren)
})
复制代码到此为止就完成为了一个组件的打包上传下载，这般咱们在每一个项目必须的时候直接npm install安装就行，当需求改动的时候只改一个文件而后再次发布就行。是不是很方便啦。
外链引入
咱们亦不上传npm上，直接运用外链的形式运用，下面咱们来瞧瞧
import引入<template>
<div class="Tag">
<TagEl/>
</div>
</template>
<script>
import TagEl from "./index"
export default {
name: Tag,
data() {return {
}
},
components: {
TagEl
},
}
</script>
<style scoped>
</style>
复制代码上面example中，咱们看到直接引入了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>
复制代码上面example中，直接运用script标签引入进来，亦是注册完运用就能够。那样咱们怎么晓得他名字是Tag，这个你在封装组件的运用，必要指定Name名叫作。 export default {
name: "Tag"}
复制代码
| 
发表于 2024-8-14 13:37:29