一.创建项目 1.vue create xxx (使用的版本是3.1.0) 2.把src目录名称改为examples 3.新建文件夹packages 用来存放组件 4.比如:新建Button组件 index.vue是用来编写组件的文件,index.js是对外引用,导出文件: import Button from './index.vue'; /* istanbul ignore next */ Button.install = function(Vue) { Vue.component(Butt…

博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构的博客 关于 Element 组件的穿梭框的重构,当时还有一些同学直接通过微信询问很多关于这个组件的问题 去年在上家公司就重构过的穿梭框,一直懒得封装成一个 Vue 组件发布到 npm,现在趁着目前比较闲,就这几天继续完善和优化.迭代更新 + 封装,终于发布啦~ krry-transfer 基于 E…

自定义vue组件发布npm仓库 参考链接:自定义vue组件发布npm仓库…

好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用.好久不用,发现已经忘记环境怎么搭建.翻看以前的组件,才慢慢回想起来,中间还出现些错误.在这记录下开发过程,以备忘. 一.新建工程 打成 npm 包的 vue 组件一般不会太复杂,当然如果是做一个 UI 库( 如:element-ui ),那另说.这里使用 vue-cli官方提供的 webpack-simple 模板来创建工程 vue init webpack-simple <project-nam…

Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni import UniSoftUI from 'unisoft-ui'; // 或者 const CustomUI = require('unisoft-ui'); // 或者 <script src="..."></s…

前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是Vue CLI 3 + element-ui + 多个二次封装的组件.最终想要的是 element-ui 这种感觉的,很多组件可以在不同项目中复用. 安装依赖 首先用Vue CLI 3来初始化项目 yarn global add @vue/cli vue create qiyun-el-ui vue…

前言 ​ 面对越来越多的组件库,越开越多的ui库,学会发布库已经是前端必须会的事情了,也算是为开源贡献一份力量,在网络上看了一些前者的文章,也算的发布成功了,虽然还存在很多问题,路不积跬步,无以至千里,一步一步来吧 参考文章…

vue用webpack打包方式新建项目,注意刚开始可以先关闭路由和代码错误检测功能 1.建立了一个Hi.vue的组件 <template> <div>Hi~~{{msg}}--{{data}}</div> </template> <script> export default { name: "Hi", data:function(){ return { msg:'wo 返回的值', data:'时间' } } } </…

本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附上大佬的文献:https://blog.csdn.net/qq_40513881/article/details/82494958 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue ini…

前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,…