vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js

封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护。好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用。

本文讲述了如何一步步从0到1封装发布一个常用的toast组件的过程。本文是搭配实例书写的,所以理论上根据本文你可以自己成功打包发布一个自己的vue 组件。

在文末有对应的项目地址可供参考。

组件创建

创建一个空文件

mkdir ToastComponent

cd ToastComponent/

初始化一个package.json

npm init -y

代码如下:

{

"name": "ToastComponent",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

新建一个src目录,里面写两个文件index.js 和 toast.vue,目录如下:

├── package.json

└── src/

└── index.js

└── toast.vue

toast.vue如下,一个单纯的vue文件

{{msg}}

export default {

name: "Toast",

data() {

return {

msg: ""

};

}

};

.toast {

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: fit-content;

height: 44px;

background-color: rgba(0, 0, 0);

display: flex;

justify-content: center;

align-items: center;

padding-left: 10px;

padding-right: 10px;

color: #fff;

border-radius: 5px;

}

index.js代码如下:

import Toast from './components/Toast.vue'

Toast.install = (Vue) => {

Vue.prototype.$toast = (msg, duration) => { //添加一个实例方法 这样全局的实例都可以调用$toast方法了 msg、duration是调用$toast时传入的两个参数

if (!msg) {

return;

}

duration = duration || 1500; //如果不传toast持续时间则默认使用此时间

const constroct = Vue.extend(Toast) //构造器

const instance = new constroct(); //创建实例

instance.msg = msg || ''; //将$toast(msg,duration)中的msg传入组件的data中

const tpl = instance.$mount().$el //vue实例未挂载时可这样拿到它的dom 后续可对它的dom进行操作

document.querySelector('body').appendChild(tpl);

setTimeout(() => {

document.querySelector('body').removeChild(tpl)

}, duration);

}

}

export default Toast;

组件打包

对组件进行编译打包,这里使用webpack,在跟目录下新建webpack.config.js,配置如下:

// webpack.config.js

const path = require('path')

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {

entry: {

index: path.join(__dirname, "/src/index.js") // 入口文件(就是刚才用于暴露组件的index.js)

},

output: {

path: path.join(__dirname, "/dist"), // 打包后的文件存放在dist文件夹

publicPath: '/dist/', // 设置公共路径

filename: "toast.js", // 打包后输出文件的文件设置为btn.js

libraryTarget: 'commonjs2' // 这个选项会尝试把库暴露给前使用的模块定义系统,这使其和CommonJS、AMD兼容或者暴露为全局变量

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader'

},

// 它会应用到普通的 `.css` 文件

// 以及 `.vue` 文件中的 `

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

},

// 它会应用到普通的 `.js` 文件

// 以及 `.vue` 文件中的 `

{

test: /\.js$/,

exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}

}

]

},

plugins: [

new VueLoaderPlugin() //这个插件是webpack打包.vue文件必须使用的 它的作用是将你定义的其他规则复制并运用到.vue文件里相应的块 如果你有一条匹配 /\.js$/ 的规则,那么它会应用到 .vue 文件里的

]

}

对应的package.json 修改如下:

{

"name": "toast-component",

"version": "1.0.0",

"description": "",

"main": "dist/toast.js",

"scripts": {

"build": "webpack --mode production"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"@babel/core": "^7.11.5",

"@babel/preset-env": "^7.11.5",

"babel-loader": "^8.1.0",

"css-loader": "^4.2.2",

"style-loader": "^1.2.1",

"vue-loader": "^15.9.3",

"vue-template-compiler": "^2.6.12",

"webpack": "^4.44.1",

"webpack-cli": "^3.3.12"

}

}

项目目录如下

46aa9bd16ce54f128dd440f7799707d3~tplv-k3u1fbpfcp-zoom-1.image

安装对应的依赖

npm i

编译生成打包文件

npm run build

可见打包后的文件已生成

f21f8c7a43d44d0c948d503978cb6755~tplv-k3u1fbpfcp-zoom-1.image

测试验证组件是否正常

npm pack

可在目录中看到生成了一个.tgz的压缩包

497e453f0d3a495e9f22bb70d65325c9~tplv-k3u1fbpfcp-zoom-1.image

如何检测这个包呢?我们可以新建一个vue项目去验证。

在此为了方便使用vue-cli新建一个test-toast项目.将刚才生成的压缩包放在test-toast目录的跟路径下:

233926a1ae5f4463acfd732c5efd86b7~tplv-k3u1fbpfcp-zoom-1.image

npm i toast-component-1.0.0.tgz

全局引入注册这个组件

//main.js

import Vue from 'vue'

import App from './App.vue'

import Toast from 'toast-component'

Vue.config.productionTip = false

//全局注册

Vue.use(Toast)

new Vue({

render: h => h(App),

}).$mount('#app')

在项目中使用

//App.vue

点我出toast

export default {

name: "App",

components: {},

methods: {

showToast() {

this.$toast("hello world", 2000);

}

}

};

运行点击按钮可以出现toast如下,可以自定义duration、msg

393b0d1f3641423a99533649d0f1d107~tplv-k3u1fbpfcp-zoom-1.image

至此验证该组件通过,就回到组件开发项目就可以发布了。

发布

在组件项目中命令行运行:

npm publish

即可发布到npm。如需要登录可以运行:

npm login

进行登录再操作。

发布成功的效果:

d6b73fa40b20469f9165a1d186489b9e~tplv-k3u1fbpfcp-zoom-1.image

就可以在npm平台看到该组件了

总结

本文介绍了如何封装常用的vue toast组件的过程,讲述了本地如何测试验证打包的组件以及发布npm的流程。你可以根据这样的流程去发布其他的vue组件,为团队和社区贡献更多自己的力量,让不凡被看见。

如果这篇文章对你有用,欢迎点赞!你的点赞和支持可以鼓励作者持续输出好的作品哟! 让我们一起快速成长~

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者: jackjieli

原文链接:https://juejin.im/post/6867798692460494861

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现拓扑图_20源码实现【自动寻路】 —【拓扑图】—网游城市互传最优路径算....

金猪脚本(原飞猪脚本)以按键精灵教学为主,涉及UiBot,Python,Lua等脚本编程语言,教学包括全自动办公脚本,游戏辅助脚本,引流脚本,网页脚本,安卓脚本,IOS脚本,注册脚本,点赞脚本,阅读脚本以及网赚脚本等各个领域。想学习按键精灵的朋友可以添加金猪脚本粉丝交流群:554…

Windows快捷键大全

天气:心情:Windows快捷键大全 一、常见用法: F1 显示当前程序或者windows的帮助内容。 F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F10或ALT 激活当前程序的菜单栏 windows键或CTRLES…

南邮哈夫曼编码c语言代码_漫画:“哈夫曼编码” 是什么鬼?

​在上一期,我们介绍了一种特殊的数据结构 “哈夫曼树”,也被称为最优二叉树。没看过的小伙伴可以点击下方链接:漫画:什么是 “哈夫曼树” ?那么,这种数据结构究竟有什么用呢?我们今天就来揭晓答…

查重多少合格_期刊论文查重一般多少合格?

sci遴选目标是收录相对较为重要的期刊,但世界上期刊太多太多,从中遴选出重要的期刊,会有筛选标准,即sci只会收录部分期刊。众多期刊中,谁能成为sci期刊,就要达到sci收录的标准,而标准少不了参考…

bzoj2060[USACO2010,Nov]Visiting Cows拜访奶牛

题目链接&#xff1a;bzoj上是权限题~ 题目大意&#xff1a; 题解&#xff1a; 树型DP f[i][0]表示不选i&#xff0c;f[i][1]表示选i。(因为很水..就不详写了) 可列出方程&#xff1a; f[i][0]sigama(max(f[y][1],f[y][0])); f[i][1]sigama(f[y][0]); y为i的孩子 #include<c…

【JZOJ4819】【NOIP2016提高A组模拟10.15】算循环

题目描述 输入 输出 样例输入 167 198 样例输出 906462341 数据范围 解法 令f(n)∑ni1i&#xff0c;g(n)∑ni1i2 易得ans∑ni1∑mj1f(n−i1)∗f(m−j1) 等价于ans∑ni1∑mj1f(i)∗f(j) 显然f(n)n∗(n−1)/2&#xff1b; 拆开得ans14∑ni1∑mj1i∗(i1)∗j∗(j1) 再得ans14∑…

《信息安全系统设计基础》 第五周学习总结

20145224 《信息安全系统设计基础》第五周学习总结 教材学习内容总结 3.1 历史观点 X86寻址的三个时代&#xff1a; 1、DOS时代的平坦模式&#xff0c;不区分用户空间和内核空间&#xff0c;很不安全&#xff1b; 2、8086的分段模式&#xff1b; 3、IA32的带保护模式的平坦模式…

Android内存优化(使用SparseArray和ArrayMap代替HashMap)

出处&#xff1a;Sunzxyong HashMap HashMap内部是使用一个默认容量为16的数组来存储数据的&#xff0c;而数组中每一个元素却又是一个链表的头结点&#xff0c;所以&#xff0c;更准确的来说&#xff0c;HashMap内部存储结构是使用哈希表的拉链结构&#xff08;数组链表&#…