前言
在此之前，你需要去npm官网注册一个属于自己的账号，记住自己的账户名以及密码、邮箱，后面会用的到。 第一步，安装webpack简易框架
vue init webpack-simple marquee
代码语言：text复制这里会用到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插件了
代码语言：javascript复制<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
