前言

在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。
第一步,安装webpack简易框架

vue init webpack-simple marquee

  1. 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cli-init
  2. npm install -g @vue/cli-init
  3. vue init 的运行效果将会跟 vue-cli@2.x 相同

第二步,封装Vue插件
1、安装完成后,会出现以下目录即可成功

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js

2、接下来,我们在src文件夹下创建一个名叫marquee的文件夹,在文件夹里面创建marquee.vue和index.js

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│ ├── App.vue
│ ├── marquee
│ │ └── marquee.vue
│ │ └── index.js
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js

3、开始在marquee.vue封装Vue插件了

  1. <template>
  2. <div class="marquee-wrap">
  3. <!-- 滚动内容 -->
  4. <div class="scroll">
  5. <p class="marquee">{{text}}</p>
  6. <!-- 文字副本 -->
  7. <p class="copy"></p>
  8. </div>
  9. <!-- 为了计算总文本宽度,通过css在页面中隐藏 -->
  10. <p class="getWidth">{{text}}</p>
  11. </div>
  12. </template>

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119924268

npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)的更多相关文章

  1. npm 发布包和删除包(2019最新攻略)

  2. npm发布包--所遇到的问题

    npm发布包: 解决方案--npm adduser的坑:http://www.tuicool.com/articles/FZbYve npm ERR publish 403,nodejs发布包流程 : ...

  3. npm学习(七)之如何发布包、更新发布包、删除发布包

    前言 我们经常使用npm来下载别人的模块或者说包,那么我们如何将自己写的模块上传到npm呢? 了解npm政策 在开始之前,最好回顾一下npm的政策,以防您对站点礼仪.命名.许可或其他指导原则有疑问. ...

  4. npm发布包

    一.发布一个新包第一步:进入要发布的项目根目录,初始化为npm包: npm init 依次按提示填入包名.版本.描述.github地址.关键字.license等 这步完成之后会生成一个package. ...

  5. 转发npm发布包的过程

    老板,来个npm账号! 因为你的包是要放在npm上的,所以,没有npm的账号,根本什么活都干不了. 在npm上注册一个账号是很简单的,随便填一下用户名密码邮箱,然后人家就会发个邮件给你,然后就注册成功 ...

  6. npm升级所有可更新包

    使用npm管理node的包,可以使用npm update <name>对单个包升级,对于npm的版本大于 2.6.1,可以使用命令: npm install -g 升级全局的本地包. 对于 ...

  7. npm发布包的那些事

    npm发包的那些事 最近一直在研习关于node的知识,发布包虽然是最基础的一点,但由于一些地方的不注意很容易发生错误,我整理了我可能出现过的一些发布包的过程中的一些error,现在分享给大家: 正确的 ...

  8. npm 发布包

    每个包都必须包含package.json配置文件 生成package.page文件 1.到项目目录下执行npm init根据提示输入即可 最后记得要yes 完成项目后就是要发布到npm了 首先需要有n ...

  9. 发布vue插件到npm上

    总体分为2个步骤 一,先写好插件 二,发布到npm上面 一,写vue插件 vue有一个开放的方法install,在vue插件需要写在这个方法里面,在vue官网,里面说的很清楚,这个方法里面可以是全局方 ...

随机推荐

  1. JavaScript学习①

    # 今日内容 1. JavaScript基础 ## JavaScript: * 概念: 一门客户端脚本语言 * 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎 * 脚本语言:不 ...

  2. Java语言学习day27--8月02日

    今日内容介绍1.Eclipse常用快捷键操作2.Eclipse文档注释导出帮助文档3.Eclipse项目的jar包导出与使用jar包4.不同修饰符混合使用细节5.辨析何时定义变量为成员变量6.类.抽象 ...

  3. AWS-Basic-S3

    Amazon Simple Storage Service,简称 S3 服务,是 AWS 2006 年推出的第一个服务,用于提供对象存储服务.其在可拓展性,数据可用性,安全性和性能都有着非常不错的体验 ...

  4. 2021.11.09 P3426 [POI2005]SZA-Template(KMP+DP)

    2021.11.09 P3426 [POI2005]SZA-Template(KMP+DP) https://www.luogu.com.cn/problem/P3426 题意: 你打算在纸上印一串字 ...

  5. mongodb 数据块的迁移流程介绍

    1. 基本概念 1.1 Chunk(数据块) 表示特定服务器上面,连续范围的分片键值所包含的一组数据,是一个逻辑概念. 例如,某数据块记录如下: { "_id" : "c ...

  6. XCTF练习题---WEB---xff_referer

    XCTF练习题---WEB---xff_referer flag:cyberpeace{9626408a4b37eab65854d8ccd22f671c} 解题步骤: 1.观察题目,打开场景 2.注意 ...

  7. c/c++递归打印文件夹

    调用linux的系统函数,实现tree的功能,递归打印文件夹 使用到得函数: DIR *opendir(const char *name); // 打开文件夹 struct dirent *readd ...

  8. 题解0012:剪花布条(KMP)

    信奥一本通1465 KPM例题 题目链接:http://ybt.ssoier.cn:8088/problem_show.php?pid=1465 题目描述:给出花布条和小饰条(字符串),求花布条中能剪 ...

  9. CentOS自动同步时间

    安装ntpdate yum install ntpdate -y 测试是否正常 ntpdate cn.ntp.org.cn # 正常情况 [root@centos7 www]# ntpdate cn. ...

  10. 一文看懂 ZooKeeper ,面试再也不用背八股(文末送PDF)

    ZooKeeper知识点总结 一.ZooKeeper 的工作机制 二.ZooKeeper 中的 ZAB 协议 三.数据模型与监听器 四.ZooKeeper 的选举机制和流程 本文将以如下内容为主线讲解 ...