手把手教你封装 Vue 组件并使用 NPM 发布
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文件
开发单个组件:
先看一下目标效果:
开始开发:
在 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><inputtype="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 是对应组件的名字,要记得在 uni-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 字段
转载于:https://www.cnblogs.com/liuyishi/p/9732386.html
手把手教你封装 Vue 组件并使用 NPM 发布相关推荐
- cli3暴露api地址 vue_手把手教你开发 Vue 组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- pls-00302: 必须声明 组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- 手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
- 封装Vue组件的原则及技巧
封装Vue组件的原则及技巧 Vue的组件系统 Vue组件的API主要包含三部分:prop.event.slot props表示组件接收的参数,最好用对象的写法,这样可以针对每个属性设置类型.默认值或自 ...
- 封装 vue 组件的过程记录
在我们使用vue的开发过程中总会遇到这样的场景,封装自己的业务组件. 封装页面组件前要考虑几个问题: 1.该业务组件的使用场景 2.在什么条件下展示一些什么数据,数据类型是什么样的,及长度颜色等 3. ...
- 手把手教你封装一个自己的数据库框架~
本教程将给大家深度剖析数据库框架底层实现的原理,然后采用泛型.反射.注解机制来教大家做一个自己的数据库框架. 前面学习了很多教程,我们转换了一下风格,开始从一个点切入,做更加深入的提升,这也是符合人的 ...
- 手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌 博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...
- vue超详细教程,手把手教你完成vue项目
Vue 一. Vue简介 Vue是于2013年(与React框架同年发布)推出的一个渐进式.自底向上的前端框架,它的作者叫尤雨溪.那么什么叫做渐进式框架呢?比较官方的说法就是:以Vue内核作为核心 ...
- Vue2组件封装 Vue组件封装
写在前面 虽然是Vue2组件封装,主要的内容是记录一下我对封装组件的一些要点和我的看法 --原学习视频来源于b站黑马从0到1封装组件库 什么是组件 都说Vue是组件化开发,确实有道理,别说按钮输入框这 ...
最新文章
- 企业云桌面-06-安装数据库服务器-051-vCdb01
- Query 快速入门教程
- 07 - java 方法里面的 return
- 7-6 求整数段和 (10 分)
- git多系统协作时换行符问题
- android权限管理, API劫持, xposed, xprivacy
- 电阻分压可以当作电源供电吗
- 软件工程学习笔记(三)~顺序图模型
- 问卷调查试卷的数据设计
- 小米路由器4a开发版固件_发现篇免拆刷小米路由器4a千兆版刷第三方固件的贴子!...
- MDK KEIL 下载算法程序 外部存储QSPI FLASH
- python考拉兹猜想_考拉兹猜想的变体
- [总结]CSS/CSS3常用样式与web移动端资源
- 通信原理|Chapter1.绪论
- 【Vue】微信扫码支付
- DXO 做了哪些测试?
- 显示类型转换和隐式类型转换
- linux系统遇到挖矿程序
- 三天全力冲上中科大先研院
- 兔子拔萝卜的java游戏_幼儿园中班体育游戏教案详案《小兔拔萝卜》