手把手教你写一个Vue组件发布到npm且可外链引入使用-六虎

前语

咱们为什么要写个组件上传到npm镜像上呢，咱们必定遇到过这样一个场景，项目中有许多当地与某个功用相似，你想到的必定是把该功用封装成Component组件，后续便利咱们调用。html标签但是过了一段时间，你的Leader让你去开发另一个项目，结果你在哪个项目中又看见了相似的功用，你这时会怎样做webpack优化? 你也能够运用Ctrl + c + v大法，拿过来上一个项目封装好的代码，但是假定需求有些改动，你得维护两套项目的代码，甚至今后更多的giti项目….，这时你就能够封装一个功用上传到你webpack构建流程们公司内网html个人网页完整代码的npm上(或许自己的账号上)，这样每次遇到类html简略网页代码似的功用直接npm install 设备import导入进来运用就能够，需求webpack5有改动时彻底可html5网页制造以改动一git指令处代码。

装备环境gitee字体大全

笔者这儿运用的是Webpack配webpack是什么东西备(有点菜，不要介意)giti，也能够设备一个Vue-cli简略版字体大小怎样调的，它那里面有显露Webpagithub永久回家地址ck的装备(也得修改自字体大小怎样调行装备)，我webpack是什么东字体美化大师西们来装备一下打包组件环境，一般开发组件库都是运用的umd格局，这种格局支撑Es Module、CommonJs、AMD三种引进办法运用，html5首要便是Wewebpack是什么东西bpack里的library和libraryTargehttp://www.baidu.comt，html文件怎样翻开假定不webpack阮一峰理解的看这儿详giti解webpack的out.libr字体规划在线生成器aryTarget特色

我这儿的Wehttp协议bpack版别为html标签特色大全4, 最好跟http署理着本章里的插件版github中文官网网页别号进行设备html标签，防止出html简略网页代码现版别兼容问题

项目结构

|- /node_modulehttp 404s
|- /srwebpack优化c
|- Tag.vue
|- main.jgiti轮胎是什么品牌s
|- indehttp 302x.html
|- webpack.config.js
|-http署理 packaghttp://www.baidu.come.json

初始化Package.jswebpack优化on

npm init -y

设备Webpack && Loader &webpack是什么东西amp;& Plugin

cwebpack5npm i webpack webpack-cli -D
cnpm i css-loader style-loader -D
cnpm i file-loader -D
cnpm i vue-lo字体ader@15字体大全.7.0 vue vue-template-cgithubompiler -D
cnpm i htmlgithub-webpack-plugiteegin@webpack是什么东西3.2.0 -D

css-loaHTTPder style-loader 装备.css文件及款式运用
file-loader 装备特别字体和图片运用
vue-loader 处理.vue文件后缀
vue 运用Vue语法
vue-template-compiler 处理.vue文件里的template模板语法

webpack.config.js

conshttp 302t VueLoaderPlugin = require('vue-loagithub中字体大全文官网网页der/lib/plugin')
const Ht字体大小怎样调mlWebpackPlugin = require("html-webWebpackpack-plugin"html代码)
module.exports = {
mode: "develgitiopment",
entry: "./src/main.js",
output: {
filename:webpack是什么东西 "index.js"
},
module: {
rules: [
{
test: /.css$/,
use:webpack装备 ["style-loader"ghttp 302it教程, "css-loader"]
},
{
test: /.(tthttp://192.168.1.1登录f|gitieot|woff|svg|woff2)/,
use: "file-loader"
},
{
test: /.vue$/,
use: "vue-loader"
}
]
},
pwebpack作用lugins: [
new VueLoaderPlugin(),字体大小怎样调
new HtmlWebpackPlugin({
templ字体转换器athtml标签e: "./ihtml代码ndex.html"
})
]
}字体辨认扫一扫

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&html代码lt;meta http-equiv="X-UA-Compathttp协议i字体辨认扫一扫ble" contenWebpackt="IE=html标签edge"&gtgiti;
<meta name="http 500viewport" content="wid字体辨认扫一扫th=device-width, initial-scale=1.0">
<title&gtgithub;Document</title>
</head>
<body>
<div id="ap字体管家p"></div&g字体大小怎样调t;
</html>

以上咱们根柢环境就树立完啦，能够在终端运用webpack热更新的原理npx wegit教程bpack工作看看哦。

封装组件

我这儿只做一个示例哈，代码就不写那么杂乱，咱们知道webpack构建流程怎样打包运用就行，详细封装成啥样看你们webpack5公git教程司需求啦~。笔者这儿运用Element Ui组件来做一个示例，信任大github翻开私库部分小伙伴公html标签属性大全司也在运用Element U字体i。假定咱们项目中有以下相似的功用就能够独自封装起来。

maingiti.js

impwebpack5orthttp 302 Vue from 'vue'
import { Tag字体美化大师 } from 'element-ui';
import 'element-ui/HTMLlib/theme-chalk/tag.css';
import custogitimTagwebpack优化 frgitiom字体管家 "./Tag.vue"
Vue.component(Tag.n字体ame, Tag)
export default customTag

Thttp 404ag.vue

<template>
&Gitlt;div clasgiti轮胎是什么品牌s="Tag">
{{ msg }}字体天下
<el-tag type="success"字体美化大师>标签二&http署理lt;/el-tag>
<html5网页制造/diwebpack阮一峰v>
</templatehtml>
<script>html5
export default {
name: 'Tag',
data() {
return {
mwebpack作用sg: "hello 蛙人",html是什么意思
}字体转换器
}Webpack,
created()https和http的差异字体大小怎样调 {
},
componentshtml标签: {},
watch: {},
methods: {
}
}
</HTMLscript>
<style scoped>
</style>

Webpack.config.h字体ttp 500js

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

output: {
filenagithubme: "indehtml5xHTTP.jwebpack作用s",
li字体转换器brary: "Modal",
libraryTarget: "ugiti轮胎是什么品牌md"
}

装备完之后就能够运用npx webwebpack构建流程pack打包，能够看到有一个dist目录，该目录下存在一个index.js, 这个文件便是咱们封装的Tag.vue文http协议件, 你能够将它引进到你的项目中，进行调用，该文件支撑Es Module、CommonJs、AMD三种办法引进。

import Vue from 'vue'
igiti轮胎是什么品牌mport { Tag } from 'element-ui';
import 'element-ui/lib/theme-httpwatchchalk/tag.css';
Vue.component(Tag.name, Tag)
import Custo字体mTag from "./index" // 打包完的，直接引进进来
new Vue({
el:http 404 "#app",
render: h =webpack5> h(CustomTag)
})

Npm发布giti轮胎是什么品牌webpack优字体美化大师化

假定没有npm账号呢，先去官网注册一个npm账号这儿

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

在终端实施npm init -y ，进行初始package.json文件，首要信息便是name和main字段，前者是这个包的称谓(也便是npmhtml5 instal xxx)，后者则是咱们打包好的文件Tag文件html，默许字体管家main就去找这个进口文件。

留神：包称谓不能包含大写，包称谓不能包含大写字体下载，包称谓不能包含大写，重要的作业说三遍

{
"name"html简略网页代码: "custGitom-tag-waren",
"version": "1.0.0",
"description": "这是xxxx"字体天下,
"main": "indexwebpack打包原理.js",
"scripts": {git指令
"webpack是什么东西test": "echo "Error: no test specif字体全国ied" &&amhttp://www.baidu.comp; exit 1"
},
"keywords": [],
"author":字体辨认扫一扫 "WaRen",
"licens字体大小webpack是什么东西怎样调e": "IhtmlSC"
}

假定淘宝镜gitlab像之前字体规划被更改，先改回来实施以下指令

npm config set registryhttps和http的差异 hhtml5网页制造ttp://registry.npmjgithub中文官网网页s.org

注册完之后，实施git字体美化大师hubnpm login, 依次填写你github永久回家地址的用户名、暗码、邮http://192.16html个人网页完整代码8.1.1登录箱

实施npm publish发布，然后等候进度条结束即可。

收拾一些常见的发布过错

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

no_perms Private mode enable, only admin can publish this mowebpack优化dule

一般是没有登录，从头登录一下httpwatch npm l字体美化大师oginhtml5网页制造 即可

npmWebpack publish failed p字体规划ut 500 unexgithub永久回家地址pected status code 401

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

npm ERR! you do not have字体规划在线生成器 permission to publish “your module name”. Are you loggewebpack装备d in as the correct user?

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

yowebwebpack是什么东西pack阮一峰u must verify your email bgit教程字体管家efore publishttp协议hing a newebpack面试题w pachttp://www.baidu.comkage

npm设备运用

cnpm i custom-tag-waren -D

main.js

import Vue from 'vgithubue'
import { Tag } from 'element-ui';
import 'element-ui/HTMLli字体规划b/theme-c字体转换器halk/tag.css';
import customTagWaren from "custom-tag-waren"  // 下载完引进进来
Vue.component(Tag.name, Tag)
newhtml简略网页代码 Vue({
el: "#app",
render: h => h(customTagWaren)
})

到此为止就结字体规划在线生成器束了一个组件html个人网页完整代码的打包上传下载，这样咱们在每个webpack是什么东西项目需求的时分直接npm i字体美化大师ngit指令stall设备webpack优化就行，当需求改动的时分只改一个文件然后再次发布github永久回家地址就行。是不是很便利啦。

外链引进giti

咱们也不上传npm上，直接运用外链的办法运用，下面咱们来看看

import引进

<tegithubmphttpwatchlate>
<div class="Tag"&ghttp://www.baidu.comt;github开放私库
<TagEl/>
</div>
</tehtml代码html标签mplatewebpack装备&字体转换器gt;
<scriphttp 302t>
impo字体辨认扫一扫rt TagEl from "./index"
export default {
name: 'Tag',
data() {
return {
}
},
components: {
TagEl
},
}
</script>
<style scoped>
</stygit字体美化大师hub中文官网网页le&gt字体管家;

上面example中，咱们看到webpack面试题直接引进了index.jsgiti轮胎是什么品牌文件并进行注册组件，直接就能够运用啦。

script引进

<!Dhttp 500OCTYPE html>
<html lang="en"&gthttpwatch;
<head>
&lthttpwatch;meta charset="UTF-8">
<meta http-equiv="X-UgitlabA-Compatgithubible" content="IE=edge">
<meta name="viewport" content="width=device-widt字体h, initial-sgitic字体管家ale=1.0">
<title>Dwebpack是什么字体下载东西ocument</title>webpack装备
</head>
&ltgitlgithub永久回家地址ab;bohtml个人网页完整代码dy&g字体大全t;
<div id="app">
&lthtml文件怎样翻开;Tag/>
</div&html个人网页完好代码gt;
<script src="https://cdn.boothtml标签cdn.net/ajax/libshtml个人网页完整代码/vue/2.6.9/vue.min.js"></字体script&gthttp 302;
<script type="text/j字体avascriphtml是什么意思t" src="./dist/index.js"字体规划在线生成器></s字体规划在线生成器cript>
</body>
<script>
new Vue字体辨认扫一扫({
e字体转换器l: "html5#app",
c字体http 404omponents: {
Tag: Tag.default
}
})
</script>
</html>

上面examgithub永久回家地址plegiti轮胎是什么品牌中，直接运用scgiteeript标签引进进来，也是注册完运用就能够。那httpclient么咱们怎样知道他名字是Tag，这个你在封装webpack优化组件的运用，有必要指定Namehttp://www.baidu.com称谓。

export default {
name: "Tag"
}

感谢

谢谢你读github完本篇文章，期望对你能有所协助，如有问题欢迎各位纠正。

我giti轮胎是什么品牌是蛙人(✿◡‿◡)，假定觉得写得能够的话，请点个赞吧字体❤。

感兴趣的字体辨认扫一扫小伙伴能够参与 [ 前端娱乐圈github永久回家地址沟通群 ]github中文官网网页欢迎咱们一起来沟通谈论

写作不易，「点赞git教程」+「在看」+「转发」 谢谢支撑❤http://www.baidu.com

往期好文

《同享12个Webhttp 302pack中常用的Loader》

《聊聊什么是CommonJs和字体大小怎样调Es字体美化大师 Module及它们的差异》

《带你git指令轻松了解数据结构之Map》

《这些作业中用到的JavaScript小技巧你都知道吗？》

《【主张保藏】同享一些作业中Hhttps和http的差异TML常用的Gihttp://www.baidu.comt指令及特别问题场景怎样处字体管家理》

《你真的了解ES6http 302中的函数特性么？字体美化大师》

参看

blog.csdn.net/weixin_4360…

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

前语