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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
div层的移动及性能优化
Nov 16 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
javascript断点调试心得分享
Apr 23 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python支持多继承吗
2020/06/19 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
团队口号大全
2014/06/06 职场文书
淘宝店策划方案
2014/06/07 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年就业工作总结
2014/11/26 职场文书
爱晚亭导游词
2015/02/09 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python