前言

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

vue init webpack-simple marquee

这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cli-init

npm install -g @vue/cli-init

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插件了

<template>
<div class="marquee-wrap">
<!-- 滚动内容 -->
<div class="scroll">
<p class="marquee">{{text}}</p>
<!-- 文字副本 -->
<p class="copy"></p>
</div>
<!-- 为了计算总文本宽度,通过css在页面中隐藏 -->
<p class="getWidth">{{text}}</p>
</div>
</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. 【直播回顾】OpenHarmony知识赋能第四期第二课——GPIO驱动开发

    3月17日晚上19点,​知识赋能第四期直播的第二节课<OpenHarmony标准系统HDF框架之GPIO驱动开发>​,在OpenHarmony开发者成长计划社群内成功举办. 本期课程,由​ ...

  2. 新手小白入门C语言第三章:关于数据类型

    C 语言包含的数据类型 1.整型 整型分为整形常量和整形变量,常量就是我们平时所看到的准确的数字,例如:1.20.333等等,变量则按我的理解是我像内存去申请一个存储空间,告诉内存空间我申请了这个地方 ...

  3. flex布局 (转)

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  4. SpringCloud入门简述

    1.微服务简述 ​ 微服务,是一个小型的服务,也是一种设计理念,将一个大型繁杂的系统拆分为多个小型的服务,进行独立部署,这些服务在独立进程中运行,通过特定的协议进行通信 ​ 优点: 轻量化:一个服务不 ...

  5. Android 12(S) 图像显示系统 - 基础知识之 BitTube

    必读: Android 12(S) 图像显示系统 - 开篇 一.基本概念 在Android显示子系统中,我们会看到有使用BitTube来进行跨进程数据传递.BitTube的实现很简洁,就是一对&quo ...

  6. HamsterBear F1C200s v5.17 Linux RTL8188EUS 适配

    HamsterBear F1C200s v5.17 Linux RTL8188EUS 适配 平台 - F1C200s Linux版本 - 5.17.2 Buildroot - v2022.2 底板做了 ...

  7. Java web与web gis学习笔记(二)——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  8. 数据库-mysql索引篇

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. mysql的索引类型? mysql中有5种索引:普通索引.唯一索引.主键 ...

  9. 短信登录与注册接口、前端所有方式登录注册页面、redis数据库介绍与安装

    今日内容概要 短信登陆接口 短信注册接口 登陆注册前端 redis介绍和安装 内容详细 1.短信登陆接口 在视图类 user/views.py中修改并添加: from .serializer impo ...

  10. 引入『客户端缓存』,Redis6算是把缓存玩明白了…

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是没更新就是在家忙着带娃的Hydra. 在前面介绍两级缓存的文章中,我们总共给出了4种实现方案,在项目中整合了本地缓存Caffe ...