1、初始化项目

vue init webpack-simple npm-vue-ui

2、修改入口文件

{"name": "npm-vue-ui","description": "npm插件库","version": "1.0.5","author": "gengbigbing","license": "MIT","private": false,         // 插件的话，需要设置为false"main": "dist/build.js",  // 修改这个入口文件"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},"dependencies": {"npm-vue-ui": "^1.0.5","vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"],"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-env": "^1.6.0","babel-preset-stage-3": "^6.24.1","cross-env": "^5.0.5","css-loader": "^0.28.7","file-loader": "^1.1.4","less": "^3.11.1","less-loader": "^5.0.0","vue-loader": "^13.0.5","vue-template-compiler": "^2.4.4","webpack": "^3.6.0","webpack-dev-server": "^2.9.1"}
}

3、修改webpack（主要打包）

const path = require('path')
const webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENVmodule.exports = {entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'build.js',library: 'build', // library指定的就是你使用require时的模块名，这里便是require("toastPanel")libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。},module: {rules: [{test: /\.css$/,use: ['vue-style-loader','css-loader'],},      {test: /\.vue$/,loader: 'vue-loader',options: {loaders: {}// other vue-loader options go here}},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {name: '[name].[ext]?[hash]'}}]},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'},extensions: ['*', '.js', '.vue', '.json']},devServer: {historyApiFallback: true,noInfo: true,overlay: true},performance: {hints: false},devtool: '#eval-source-map'
}if (process.env.NODE_ENV === 'production') {module.exports.devtool = '#source-map'// http://vue-loader.vuejs.org/en/workflow/production.htmlmodule.exports.plugins = (module.exports.plugins || []).concat([new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),new webpack.optimize.UglifyJsPlugin({sourceMap: false,compress: {warnings: false}}),new webpack.LoaderOptionsPlugin({minimize: false})])
}

4、src文件夹下新建lib放置插件源码

①lib文件包含index.js文件（抛出需要的方法）

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

②backToTop.vue（自己开发的插件）

<template><div class="backToTop" :style="'z-index: ' + zIndex" @click="backToTop" v-show="bVisible"><div class="icon"></div></div>
</template><script>
export default {name: "back-to-top",props: {zIndex: {type: Number,default: 9999},triggerHeight: {type: Number},smooth: {type: Boolean,default: true},scrollInterval: {type: Number,default: 10},scrollHeight: {type: Number,default: 100}},data() {return {interval: null, // 计时器bVisible: false // 按钮显示状态};},methods: {resetToTop() {window.pageYOffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;},buttonStatus() {var currentHeight =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;let browserHeight = this.triggerHeight || window.outerHeight / 4;this.bVisible = currentHeight > browserHeight;},backToTop() {if (this.smooth) {var that = this,_interval = this.scrollInterval,_height = this.scrollHeight;// 间隔{_interval}移动{_height}this.interval = setInterval(function() {that.smoothScroll(_height);}, _interval);} else {this.resetToTop();}},smoothScroll(y) {if (window.pageYOffset > 0) {window.pageYOffset = window.pageYOffset - y;}if (document.documentElement.scrollTop > 0) {document.documentElement.scrollTop =document.documentElement.scrollTop - y;}if (document.body.scrollTop > 0) {document.body.scrollTop = document.body.scrollTop - y;}var positionNow =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;if (positionNow <= 0) {clearInterval(this.interval);// 清除计时器后，全部重置为零，预防回滚为负数时，不再显示的bugthis.resetToTop();}}},created() {window.addEventListener("scroll", this.buttonStatus);},destroyed() {window.removeEventListener("scroll", this.buttonStatus);}
};
</script><style lang="less" scoped>
.backToTop {position: fixed;right: 100px;bottom: 50px;width: 40px;height: 40px;size: 40px;border-radius: 20px;cursor: pointer;transition: 0.3s;box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);background-color: #fff;overflow: hidden;.icon {position: absolute;margin: auto;left: 0;top: -8px;bottom: 0;right: 0;width: 0;height: 0;border-width: 8px;border-style: solid;border-color: transparent #0099cc transparent transparent;transform: rotate(90deg); /*顺时针旋转90°*/}
}
.backToTop:hover {box-shadow: 0 0 20px #000;
}
</style>

5、上传npm库

// 登录npm
npm login// 推送插件到npm库
npm publish

6、错误解决方法

①如下报错

这是由于同一个name下不能下载名称相同的插件，修改package.json的那么即可；

②npm publish推送报错

看下自己npm的代理地址，是否设置为了淘宝镜像，改回来即可。

npm地址：http://registry.npmjs.org/

npm插件开发-Vue插件相关推荐

从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
vue开发搭建（npm安装 + vue脚手架安装）
一.概念 1.npm: Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...
java post请求 json_好程序员Java教程分享Vue插件之Axios
好程序员Java教程分享Vue插件之Axios 环境安装: npm install --save axios vue-axios //安装axios Npm install //安装依赖在main. ...
vue axios 发送get请求传递参数给后端失败_Java之Vue插件之Axios
Java之Vue插件之Axios,环境安装: npm install --save axios vue-axios //安装axios Npm install //安装依赖在main.js中注册 i ...
[vue插件]基于vue2.x的电商图片放大镜插件
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...
chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
npm安装less插件 - cmd篇
vue项目:npm安装less插件和之前一样,先cd到项目目录:然后执行cmd指令. cmd指令: npm install less less-loader --save 或者(国内阿里镜像)cnp ...
chrome vue插件_「Vue学习记录一」开发环境准备
1.开发工具 - VS Code ❝ 选择 VS Code 是因为这是一款很容易上手的工具,在 VS Code 中找到的每个功能都完成一项出色的工作,构建了一些简单的功能集,包括语法高亮.智能补全.集 ...
vue 插件滑块验证_Vue插件之滑动验证码
本文实例为大家分享了Vue插件之滑动验证码的具体代码,供大家参考,具体内容如下预览目前仅前端实现,支持移动端滑动事件.版本V1.0.5 github文档地址安装 npm install --sa ...

npm插件开发-Vue插件

1、初始化项目

2、修改入口文件

3、修改webpack（主要打包）

4、src文件夹下新建lib放置插件源码

5、上传npm库

6、错误解决方法

npm插件开发-Vue插件相关推荐

最新文章

热门文章