Vue 组件封装 并使用 NPM 发布的教程


Posted in Javascript onSeptember 30, 2018

正文开始

Vue 开发插件

我们可以先查看Vue的插件的开发规范

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:

ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni

import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 <script src="..."></script>
Vue.use(UniSoftUI);

回到顶部

构建一个 Vue 项目

开发组件我们使用 webpack-simple 模板:

vue init webpack-simple <project-name>

ps: 这里我选择了 use sass 因为之后开发组件会用到

目录结构如图:

├── src/                           // 源码目录
│   ├── packages/                  // 组件目录
│   │   ├── switch/                // 组件(以switch为例)
│   │   ├── uni-switch.vue        // 组件代码
│   │   ├── index.js               // 挂载插件
│   ├── App.vue                    // 页面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // (所有)插件入口
├── index.html                     // 入口html文件

开发单个组件:

先看一下目标效果:

Vue 组件封装 并使用 NPM 发布的教程

开始开发:

 在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码,继续在 switch 文件夹中新建 uni-switch.vue 和 index.js 文件

uni-switch.vue 组件:

<template>
 <div class="uni-switch">
 <div class="wrapper">
  <span><slot></slot></span>
  <div :class="[{closed: !checked}, 'switch-box']"
   @click="handleChange(value)">
  <span :class="{closed: !checked}"></span>
  </div>

  <input
  type="checkbox"
  @change="handleChange"
  :true-value="activeValue"
  :false-value="inactiveValue"
  :disabled="disabled"
  :value="value"/>
 </div>
 </div>

</template>

<script>
 export default {
 name: "UniSwitch",
 data() {
  return {}
 },
 props: {
  value: {
  type: [Boolean, String, Number],
  default: false
  },
  activeValue: {
  type: [Boolean, String, Number],
  default: true
  },
  inactiveValue: {
  type: [Boolean, String, Number],
  default: false
  },
  disabled: {
  type: Boolean,
  default: false
  }
 },
 computed: {
  checked() {
  return this.value === this.activeValue;
  }
 },
 methods: {
  handleChange(value) {
  this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
  }
 }
 }
</script>

index.js:

// UniSwitch 是对应组件的名字,要记得在 moor-switch.vue 文件中还是 name 属性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

好了基本完成了,但是为了将所有的组件集中起来比如我还有 select、 input、 button 等组件,那么我想要统一将他们放在一个文件这中便于管理

所以在 App.vue 同级目录我新建了一个 index.js 文件

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果还有的话继续添加

const components = [
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果还有的话继续添加
]

const install = function (Vue, opts = {}) {
 components.map(component => {
 Vue.component(component.name, component);
 })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}

export default {
 install,
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果还有的话继续添加
}

好了到这里我们的组件就开发完成了;下面开始说怎么打包发布到 npm 上

发布到 npm

打包之前,首先我们需要改一下 webpack.config.js 这个文件;

// ... 此处省略代码
const NODE_ENV = process.env.NODE_ENV
module.exports = {
 // 根据不同的执行环境配置不同的入口
 entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
 output: {
 // 修改打包出口,在最外级目录打包出一个 index.js 文件,我们 import 默认会指向这个文件
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 filename: 'custom-ui.js',
 library: 'custom-ui', // 指定的就是你使用require时的模块名
 libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },
 // ... 此处省略代码
}

然后, 再修改package.json 文件:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/unisoft-ui.js",

发布命令只有两步骤:

npm login   // 登陆
npm publish // 发布

完成之后我们就可以在项目中安装使用了

在项目中使用unisoft-ui

在自己的项目中使用unisoft-ui, 先从 npm 安装

npm install unisoft-ui -S

在 mian.js 中引入

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)

在组件中使用:

<template>
 <div id="app">
 <h1>{{msg}}</h1>
 <uni-switch v-model="isSwitch">
  <span class="text">{{switchText}}</span>
 </uni-switch>
 </div>
</template>

<script>
 export default {
 name: 'app',
 data() {
  return {
  msg: 'welecom to unisoft-ui',
  isSwitch: false,
  }
 },
 computed: {
  switchText() {
  return this.isSwitch ? '开' : '关';
  }
 },
 }
</script>

注意: 在发布npm包之前要先修改 .gitignore 去掉忽略 dist, 因为我们打包的文件也需要提交;每次上到 npm 上需要更改版本号,package.json 里的 version 字段

总结

以上所述是小编给大家介绍的Vue 组件封装 并使用 NPM 发布的教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
编程语言JavaScript简介
Oct 16 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
You might like
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
JQuery小知识
2010/10/15 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python实现栈的方法
2015/05/26 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
自荐信写法介绍
2014/01/25 职场文书
带薪年假请假条
2014/02/04 职场文书
路政管理求职信
2014/06/18 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android