首页 / VUE / Vue.js构建你的第一个包并在NPM上发布的方法步骤

Vue.js构建你的第一个包并在NPM上发布的方法步骤

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js构建你的第一个包并在NPM上发布的方法步骤，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7558字，纯文字阅读大概需要11分钟。

内容图文

本文我们将学习如何制作一个vue插件，并将其分发到npm上，能够让其他人安装使用.

插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们，因为它们能够以极快的速度发布新功能。

正如官方Vue.js文档中所述，插件的范围没有限制。通常我们想实现的功能有下面5种:

添加全局方法或者属性 (如: vue-custom-element)
添加全局资源：指令/过滤器/过渡等 (如：vue-touch)
通过全局 mixin 方法添加一些组件选项 (如：vue-router)
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现 (如：vue-axios)
一个库，提供自己的 API，同时提供上面提到的一个或多个功能（如：vue-router）

OK，现在你了解了vue插件是什么了，以及它可以满足哪些需求！

如何在vue项目中使用插件

通过npm install或yarn add安装插件后，你需要在main.js文件中导入它并调用Vue.use（）全局方法。

注意：在new Vue() 前，必须先实例化所有插件.

import Vue from "vue";
import MyPlugin from "myplugin";

Vue.use(MyPlugin);

new Vue({
// [...]
})

如果插件包支持cdn方式引用的话，也可以通过以下方式引用：

<script src="https://cdn.xxx.cn/npm/myplugin@latest/dist/myplugin.min.js"></script>

另外，在你调用Vue.use()时，想对插件做一些自定义配置，你可以这么做：

Vue.use(MyPlugin, {
 option1: false,
 option2: true
})

举个例子，比如在引入热门的Element UI库时，它支持传入一个全局配置对象

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element, {
 // size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）
 size: 'small', 
 zIndex: 3000
});

现在让我们进入正题！开始构建你的第一个vue插件💪

来制作一个酷炫的按钮组件

作为一个有追求的前端，相信你们在公司开发项目时，肯定会想过，"要是公司有属于自己的一套UI组件库，那肯定很棒！"。
如果你有这个想法，那你认真看完这篇文章后，将会给你带来很多灵感和启发。

步骤 1：初始化插件目录结构

先创建一个空的项目文件夹，名字随意取，然后初始化生成package.json文件（文件的内容后面会介绍）

$ mkdir ku-button && cd ku-button
$ npm init
# 上面这个命令会提示一些问题，一直回车就行，然后最后会创建一个package.json文件

然后在项目根目录中创建一个src文件夹，里面新建一个KuButton.vue组件，这里你甚至可以通过vue的vue serve和vue build命令行来对单个*.vue文件进行快速原型开发，不过前提需要先额外安装一个全局的扩展

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

安装完成后，当你成功执行以下命令行后：

$ vue serve KuButton.vue

就可以直接在浏览器访问 http://localhost:8080/

更多关于vue快速原型开发的知识，你可以查看官方文档

下面，我们开始完善Button按钮组件的代码，让它跑起来！

步骤 2: 完善组件代码，让按钮可配置化

这里我将模仿ElementUI库的Button组件，给大家揭晓它的奇妙之处！

模板 Template

<template>
 <button
   :class="[
      'ku-button',
      'ku-button--' + type,
      'ku-button--' + size,
      {
      'ku-button--round': round
      }
     ]"
   @click="onClick">
  <slot></slot>
 </button>
</template>

JavaScript

<script>
 export default {
  props: {
   type: {
    type: String,
    default: 'default',
    validator(type) {
     return ['default', 'primary', 'info', 'warning', 'danger'].includes(type)
    }
   },
   round: {
    type: Boolean,
    default: false
   },
   size: {
    type: String,
    default: "medium",
    validator(size) {
     return ["medium", "small", "mini"].includes(size)
    }
   },
  },

  methods: {
   onClick(event) {
    this.$emit("click", event);
   }
  }
 };
</script>

样式 Style

<style>
 .ku-button {
  display: inline-block;
  outline: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  user-select: none;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
 }

 /*颜色*/
 .ku-button--default {
 }

 .ku-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
 }

 .ku-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
 }

 .ku-button--info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
 }

 .ku-button--warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
 }

 .ku-button--danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
 }

 /*大小*/
 .ku-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
 }

 .ku-button--small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
 }

 .ku-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
 }

 /*是否圆角*/
 .ku-button--round {
  border-radius: 20px;
 }
</style>

后续我们就可以像这样使用:

<ku-button type="success" size="mini" round>小按钮</ku-button>
虽然我将按钮模板进行了简化，但这里有几个学习点很重要：

使用了BEM规范。（更多关于BEM的知识，可查看这里）
通过props配置接收3个参数（按钮类型，按钮大小，按钮是否为圆角），这样方便使用者随时切换不同主题的按钮。
使用了slot插槽，这样我们就可以这样使用<ku-button>按钮文本</ku-button>
定义了@click事件，当点击组件时会触发$emit

步骤 3: 写一个Install方法

文章前面提到了Vue.use()方法，调用时它将会执行install方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

下面，我们在src中创建一个index.js文件，然后再里面写：

import KuButton from "./KuButton.vue"

export default {
 install(Vue, options) {
  // 注册全局组件
  // https://cn.vuejs.org/v2/guide/components-registration.html
  Vue.component("ku-button", KuButton)
 }
}

到这里，一个完整的插件就差不多啦！ 👏

步骤 4: 完善根目录的package.json文件

打开刚刚npm init创建的package.json文件

{
 "private": false,
 "name": "ku-button",
 "version": "1.0.0",
 "description": "A niubility button",
 "author": "sugars",
 "license": "MIT",
 "main": "./dist/index.umd.js",
 "scripts": {
  "dev": "vue serve KuButton.vue"
 },
 "files": [
  "dist"
 ],
 "devDependencies": {
  "bili": "^4.7.3",
  "rollup-plugin-vue": "^5.0.0",
  "vue-template-compiler": "^2.6.10"
 }
}

说明：

private属性为false时代表你的包不是私有的，所有人都能查看并npm install使用
name属性指后续发布在npm时的包名，请确保你的包名未被注册
version属性指包的版本号，在你每次发布更新到npm时，都需要增加版本号。你可以查看更多语义化版本号的知识
description属性指包的描述信息，写上去好让大家知道你这个包是干嘛用的
main属性指定了包加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
scripts属性指定了运行脚本命令的npm命令行缩写，比如build指定了运行npm run build时，所要执行的命令。
files属性可以指定哪些文件需要被发布到npm上，比如这里指定了dist文件夹里的所有文件

你可以在npm官方文档查看更多关于package.json的知识

打包

打包工具这里我使用的是Bili，一个强大的速度快，零配置的打包工具。

开始安装打包工具：

$ npm install --save-dev bili
$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler

然后在项目根目录下创建一个bili.config.js配置文件，配置如下：

module.exports = {
 banner: true,
 output: {
  extractCSS: false,
  format: ['umd'],
  moduleName: 'KuButton'
 },
 plugins: {
  vue: true
 }
}

完成后，你只需要执行一个命令就打包完成，就这么简单：

$ bili

打包成功后，在项目根目录下会生成一个dist文件夹，里面有个index.umd.js文件

在npm上分享你的成果

到这里，你的vue插件就开发完成了。剩下最后一步，就是在npmjs上发布你的插件！
但前提是你需要有一个npmjs账号，如果没有的话需要去注册一个，有的话可以跳过这一步。

打开终端，输入：

$ npm login 
// 回车后，输入你注册npmjs时填写的用户名，密码和邮箱
// 登录成功后，会提示：Logged in as <username> on https://registry.npmjs.org/.

查看当前npm用户登录情况:

$ npm whoami
// 如果登录成功，

输出的是登录的用户名

检查以上步骤都没问题后，进入刚刚完成的ku-button项目目录，开始发布：

$ npm publish

执行成功后，你的插件就正式发布成功了！！🎉

后续如果要更新插件，只需要增加package.json里的version版本号，然后再次执行npm publish发布更新就可以了！

项目中使用刚发布的插件

你可以像安装其他插件一样：

$ npm install --save ku-button

或者

$ yarn add ku-button

接着，在main.js引用：

import KuButton from "ku-button"
import Vue from "vue"

Vue.use(KuButton)

最后，在你的页面中这样：

<ku-button round type="success" size="small">真酷！!</ku-button>

Vue.js构建你的第一个包并在NPM上发布的方法步骤 - 文章图片

附上 Github地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的Vue.js构建你的第一个包并在NPM上发布的方法步骤全部内容，希望文章能够帮你解决Vue.js构建你的第一个包并在NPM上发布的方法步骤所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/332058.html

来源：【匿名】

【上一篇】Vue基本使用之对象提供的属性功能【下一篇】php怎么返回数据给vue

更多 ►

【Vue.js构建你的第一个包并在NPM上发布的方法步骤】教程文章相关的互联网学习教程文章

Vue2.0 【第四季】第2节实例方法【代码】【图】

目录Vue2.0 【第四季】第2节实例方法第2节实例方法一、$mount方法二、$destroy()卸载方法三、$forceUpdate()更新方法四、$nextTick()数据修改方法Vue2.0 【第四季】第2节实例方法第2节实例方法一、$mount方法$mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。这里我们作了da0sy的扩展，然后用$mount的方法把da0sy挂载到DOM上，我们也生成了一个Vue的实例，直接看代码。<!DOCTYPE html> <html lang="en"> <head>...

VUE - 跨域问题解决方法。【代码】

VUE访问接口的时候，很可能出现跨域请求，从而被提供接口的服务器拒绝，这个问题可以直接在VUE里面解决，解决方法：在vue.config.js里面加入配置信息。在module.exports中加入： devServer: {proxy:‘http://localhost:8089‘},这里的proxy，是真正要访问的提供接口的服务器url ！参考：https://blog.csdn.net/wh_xmy/article/details/87705840https://www.cnblogs.com/linjiangxian/p/13203835.html原文：https://www.cnblogs.co...

vue中在data中引入图片的路径方法【代码】

错误的引入方式：export default {data () {return{imgUrl_homePage:‘@/assets/img/homePage_active.png‘}} }因为webpack是按字符号打包的，正确的引入方式： 1.import在外部引入import img_url from ‘@/assets/img/homePage_active.png‘ export default {data () {return{imgUrl_homePage:img_url}} }2.require内部引入export default {data () {return{imgUrl_homePage:require(‘@/assets/img/homePage_active.png‘）}} } ...

vue----webpack模板----组件复用解决方法【代码】

组件复用当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化　　比如：　　　　从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...

VUE开发中，数据变化后，修改了绑定对象的属性值后，页面dom没有发生变化，两种方法可以重新渲染$set和$forceUpdate【代码】【图】

最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图该怎么解决呢：方法1.$set// 上传成功回调函数 handleAvatarSuccess(res, file) {this.$set(this.form,‘imgUrl‘,res.data); }, 方法2.$forceUpdatehandleAvatarSuccess(res, file) {this.form.imgUrl = res.data;this.$forceUpdate(); }, $set官方ap...

vue生命周期中常用的两个方法【代码】【图】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><son></son></div><template id="son"><div><h2>子组件</h2></div></template><script>new Vue({el: ‘#app‘,data: {},methods: {},components: {son: {template:‘#son‘,data...

Vue的watch和computed方法的使用【代码】

Vue的watch属性Vue的watch属性可以用来监听data属性中数据的变化<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="lib/vue.min.js"></script><script src="lib/vue-router-3.0.1.js"></script></head><body><div ><input type="text" v-model="firstname" /></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{firstname:"",lastname:""},methods:{},watch:{firstname:funct...

Vue创建局部组件的方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...

Vue子组件调用父组件的方法【代码】

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div> </template> <script>import child from ‘~/components/dam/child‘;export default {components: {child},methods: {fatherMethod() {console.log(‘测试‘);}}}; </script>子组件<template><div><button @click="childMethod()">点击</button></div> </template> <script>export default {methods: {childMetho...

vue项目中总结用到的方法。【代码】

依赖 vue-router获得当前字符串，对应当前路由的路径，总是解析为绝对路径。 computed: {productIcon () {return this.imgMap[this.$route.path]}} 跳转到指定页面使用router - link to:"/orderList" 可以，注意带/是定位到了根元素this.$router.push({path: ‘/orderList‘}) 原文：http://www.cnblogs.com/waitforyou/p/6790216.html

vue 中 ajax请求封装以及使用方法【代码】

async/await　　1）async/await场景　　这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。　　2）名词解释　　>async 　　 async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行， async 函数返回的是一个promise 对象。　　>await 　　await的含义为等待...

Vue父子组件传值以及父调子方法、子调父方法【代码】【图】

稍微总结了一下Vue中父子间传值以及相互调方法的问题，非常基础、希望可以帮到你！先来个最常用的，直接上代码： 1、父传值给子组件父组件：<template><div><p class="father">父组件</p><child :sid="id"></child></div> </template><script> import child from ‘./child‘ export default {components: {child},data() {return {id:‘0920‘, // 父组件向子组件传的值 }}, } </script>子组件：<template><div><p class="chil...

Vue Cli 打包之后静态资源路径不对的解决方法【代码】

cli2版本：　　将 config/index.js 里的 assetsPublicPath 的值改为 ‘./‘ 。build: {...assetsPublicPath: ‘./‘,... } cli3版本：　　在根目录下新建 vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）module.exports = {publicPath: ‘‘, // 相对于 HTML 页面（目录相同） } 参考链接：　1. vue打包静态资源路径不正确的解决办法　　　　　　2. Vue cli 3 build时怎么修改assets public path为相对路...

小程序中类似Vue的ref获取组件内部属性和方法

给子组件添加一个id属性，方便查找<view> <first-component id="mycomp"/></view>123通过this.selectComponent方法查找子组件Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log(this); // 获取子组件的数据 console.log(this.selectComponent("#mycomp").data); // 调用子组件的方法 this.selectComponent("#mycomp").huanghail...

使用vue-cli打包项目时候的一些体积优化方法【代码】

1.合理使用运行时依赖和开发依赖作为开发者，要合理区分哪些插件是项目上线运行后需要的，哪些是用于打包编译，压缩而运行时并不需要的，进行分类安装。开发依赖不会被打包进最终的项目文件，能大大减少项目文件大小。开发依赖在项目的package.json的devDependencies里，安装时使用的命令行：npm install xxx --save–dev //简写 npm i xxx -D运行时依赖在package.json的dependencies里，安装命令：npm install xxx --save //简写...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / Vue.js构建你的第一个包并在NPM上发布的方法步骤

Vue.js构建你的第一个包并在NPM上发布的方法步骤

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue.js构建你的第一个包并在NPM上发布的方法步骤】教程文章相关的互联网学习教程文章

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程