文档章节

初探 vue 插件开发

秋季长青
 秋季长青
发布于 07/11 16:14
字数 618
阅读 704
收藏 14
点赞 1
评论 4

目标:开发一个 vue 插件,发布到npm并且,可以使用 npm 安装。

  • vue list 查看当前在线的模板信息

步骤如下:

1. 初始化项目

vue init webpack-simple projectName

运行项目:

cd projectName
npm install
npm run dev

2. 写插件

在 src 文件夹下面建 lib 文件夹,用于存放插件。lib 文件夹下再建 toast.js 和 toast.vue 两个文件。整个项目目录如下所示:

toast.vue 的内容如下:

<template>
    <div class="vue-toast-wraper" v-show="isShow">
        {{msg}}
    </div>
</template>
<script>
export default {
    name:'toast',
    props:{
        msg:{
            default:"",
            type:String
        },
        isShow:{
            default:false,
            type:Boolean
        }
    },
    mounted(){
        if(this.isShow){
            setTimeout(() => {
                this.isShow = false
            },2500);
        }
    }
}
</script>
<style scoped>
.vue-toast-wraper{
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 17px;
    padding: 10px;
    border-radius:12px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
</style>

toast.vue 是做一个 弹出提示,其中传入的参数有两个:toastMsg 和 isSHowToast,分别表示 提示消息以及是否显示提示。

toast.js 中写 install 方法,内容如下:

import VueToastPlugin from './toast.vue'
const toastPlugin = {
    install: function(Vue) {
        Vue.component(VueToastPlugin.name, VueToastPlugin)
    }
}
// global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(toastPlugin)
}
// 导出模块
export default toastPlugin

3. 本地测试

本插件的功能就这么多,因为我们尚未发布,所以先进行本地测试。

3.1 将 App.vue 多余代码删除。

3.2 在 main.js 中引入 

import Vue from 'vue'
import App from './App.vue'

import Toast from './lib/toast.js'
Vue.use(Toast)

new Vue({
  el: '#app',
  render: h => h(App)
})

3.3 在 App.vue 中使用 toast (别忘记需要传递的参数)

<template>
  <div id="app">
    <toast :msg = "'测试'" :isShow = "true"/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
</style>

3.4 本地测试的结果,如图,是所期望的

4. 配置打包

本地测试没有问题过后,我们就可以准备一下修改配置,为打包发布做准备。

4.1 修改 webpack.config.js

关于 library 的详解。

4.2 修改 package.json

4.3 修改 .gitignore 文件

去掉 dist。

4.4 修改 index.html文件

  <body>
    <div id="app"></div>
    <script src="/dist/toast.js"></script>
  </body>

4.5 项目打包

npm run build

5. 在npm上发布

5.1 注册npm账号

移步 npm 官网。

5.2 本地控制台登录 npm 账号

npm adduser

5.3 发布

npm publish

参考文档:

01. 《vue 插件开发教程与发布》 CSDN ,作者:吹过麦田的风;

02. 《Vue 插件开发与发布》 CSDN,作者:白云随风飘;

© 著作权归作者所有

共有 人打赏支持
秋季长青
粉丝 29
博文 46
码字总数 38154
作品 0
南京
程序员
加载中

评论(4)

生如秋叶
生如秋叶
太过流程化、形式化,分享技术,建议多讲讲‘为什么’。为什么这样分目录?,为什么要改这里?
秋季长青
秋季长青
刚刚在公司分享这个题目,大家都不太愿意听,觉得无聊。。。。是不是只有我觉得有意义呢。。。唉。。。
秋季长青
秋季长青
我在搞这个的时候遇到好多问题,如果你也遇到了,可以戳我。
使用webpack打包编写一个vue插件

一、说明: 需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用。 二、开发一个vue-toast插件 借助npm平台发布一个vue插件 流程: 声明插件——写插件—...

爱敲代码的程序员
2017/11/01
0
0
阿里系 React 项目飞冰 2.0 正式发布:支持 Vue 项目开发

飞冰 2.0 大版本已正式发布,带来了许多重要更新。 飞冰 2.0 是什么? 飞冰通过 Iceworks GUI 工具、完善的开发文档、丰富的组件等,无需安装配置任何前端开发环境(比如安装 node 等)、无需...

局长
05/08
0
17
Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC
04/19
0
0
WEB前端学习:vue图标组件Vue-Awesome,让你快速方便的使用font-awesome图标

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
06/04
0
0
从开发到发布一款基于Vue2x的图片预览插件

先来看下Demo LiveDemo 关于开发Vue插件的几种方式 (具体请移步官网)Vue官网 我采用第一种方式来编写这个插件 1.第一步创建项目 vue init webpack-simple youProjectName(你的项目名称)具体...

JoySang
05/13
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2017/04/20
0
0
让IntelliJ IDEA支持.vue文件

最近将idea升级到2018的版本,需要重新配置一下vue的环境,所以随便整理了一下操作过程。 第一步:先安装vue插件: file --> settings --> plugins,然后什么都不用输入,直接点击Browse re...

四小七
05/11
0
0
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
04/05
0
0
飞冰 2.0 正式发布并支持 Vue 项目开发

距离 1.0 正式版发布又过了两个月,飞冰迎来了 2.0 大版本的更新。 飞冰 2.0 是什么? 详细的飞冰背景和介绍等,请参照 1.0 正式版发布的介绍,这里不再赘述:zhuanlan.zhihu.com/p/34265596...

yujiangshui
05/08
0
0
web前端Vue.js经典开源项目汇总

  Vue是什么?   Vue.js(读音/vju/,类似于view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易...

爱前端
2017/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部