文档章节

初探 vue 插件开发

秋季长青
 秋季长青
发布于 07/11 16:14
字数 618
阅读 1112
收藏 20

目标:开发一个 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,作者:白云随风飘;

© 著作权归作者所有

共有 人打赏支持
秋季长青
粉丝 33
博文 54
码字总数 42808
作品 0
南京
前端工程师
私信 提问
加载中

评论(4)

生如秋叶
生如秋叶
太过流程化、形式化,分享技术,建议多讲讲‘为什么’。为什么这样分目录?,为什么要改这里?
默默不吭声
默默不吭声
:+1:
秋季长青
秋季长青
刚刚在公司分享这个题目,大家都不太愿意听,觉得无聊。。。。是不是只有我觉得有意义呢。。。唉。。。
秋季长青
秋季长青
我在搞这个的时候遇到好多问题,如果你也遇到了,可以戳我。
vue-cli 脚手架中 webpack 配置基础文件详解

一、前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善...

大灰狼的小绵羊哥哥
10/14
0
0
Vue-cli@3.0 插件系统简析

Vue-cli@3.0 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供...

滴滴WebApp架构组
09/05
0
0
Vue-Router源码学习之install方法

Vue是怎么注册插件的呢? 使用过Vue的coder都知道,如果想注册一个vue的插件,在vue对象上能够使用的话(并不是绑在Vue.prototype上的那种暴力方式),必须使用Vue.use(你的插件)的方式来注册...

酸楚与甘甜
09/07
0
0
Vue插件开发流程详解-从开发到发布至npm(二)

 前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,(这里感谢博客园的网友,给我点赞推荐了) 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入...

大灰狼的小绵羊哥哥
09/16
0
0
Vue中路由管理器Vue Router使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 创建过程比较慢,需...

tianma3798
10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
3
0
【分享实录】BANCOR算法详解及代码实现

1 活动基本信息 1)主题:【区块链技术工坊22期】BANCOR算法详解及代码实现 2)议题: BANCOR算法的特点和优劣势 BANCOR算法和举例 如何加入BANCOR.NETWORK交易所 如何开发自己的BANCOR去中心...

HiBlock
昨天
2
0
微信小程序(2)

开始看微信小程序的教程了。刚刚看完官方教程的视图层部分。这里摘录一些自己认为的部分关键点。 1.直接修改数值无法重新渲染,需要使用setData()方法; 2.列表渲染中:wx:key用于保持项目在...

MKjy
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部