前言
在此之前，你需要去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>
<script>
export default {
name: 'marquee',
props: ['val'],
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = setTimeout(() => {
this.move()
clearTimeout(timer)
}, 1000)
},
// 把父组件传入的arr转化成字符串
mounted () {
for (let item of this.val) {
this.text += ' ' + item
}
},
methods: {
move () {
let maxWidth = document.querySelector('.marquee-wrap').clientWidth
// 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
let width = document.querySelector('.getWidth').scrollWidth
// 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动
if (width <= maxWidth) return
let scroll = document.querySelector('.scroll')
let copy = document.querySelector('.copy')
copy.innerText = this.text // 文字副本填充
let distance = 0 // 位移距离
// 设置位移
this.timer = setInterval(() => {
distance -= 1
// 如果位移超过文字宽度，则回到起点
if (-distance >= width) {
distance = 16 // 距离必须与marquee的margin宽度相同
}
scroll.style.transform = 'translateX(' + distance + 'px)'
}, 20)
}
},
beforeDestroy () {
// 清除计时器
clearInterval(this.timer)
}
}
</script>
<style scoped> .marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 16px;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 16px;
font-family: "微软雅黑 Light";
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}</style>
4、为了方便查看效果，可以在App.vue先引入组件查看效果
<template>
<div id="app">
<Marquee :val="msg"></Marquee>
</div>
</template>
<script>
import Marquee from '../src/marquee/marquee.vue';
export default {
name: 'app',
data () {
return {
msg: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
}
},
components:{
Marquee
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5、启动命令，查看效果
npm install
npm run dev
第三步，发布Vue插件前配置
1、编辑marquee文件夹下的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
index.js
// index.js
// 引入组件
import marquee from './marquee';
// 组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
marquee.install = Vue => Vue.component(marquee.name, marquee); //注册组件
export default marquee;
2、修改webpack.config.js
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
entry: NODE_ENV == 'development' ? './src/main.js' : './src/marquee/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'marquee.js', //输出文件名
library: 'marquee', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式， UMD 同时支持两种执行环境：node环境、浏览器环境。
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
}
3、打包
npm run build
如果成功的话，根目录下会出现dist文件夹，里面分别是marquee.js和marquee.js.map
marquee/
├── dist
│ ├── marquee.js
│ ├── marquee.js.map
├── 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
4、修改package.json
{
"author": "maomincoding",
"main": "dist/marquee.js",
"license": "ISC",
"keywords": ["marquee"],
"private": false,
}
author的值为npm用户名，这里一定要注意。main的值为你刚才打包的路径文件license的值按照以上即可keywords为用户搜索的关键词private设为false, 开源因此需要将这个字段改为 false
5、修改.gitignore
可以 删除 dist/字段，提交的时候一并上传上去。
.DS_Store
node_modules/
dist/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
6、编辑README.md
这是你上传之后的自述文件，可以在网页上显示，用的也是md语法，这里就不显示代码了，来张网页图示范，也可以直接去marquee查看说明
第四步，npm包发布
1、在此之前，你一定要注意先查看登录源，切换到根目录下marquee/
npm config get registry
如果是 https://registry.npm.taobao.org 那么，输入以下命令，切换到http://registry.npmjs.org
npm config set registry=http://registry.npmjs.org
切换淘宝源
npm config set registry=https://registry.npm.taobao.org
2、登录，输入命令
npm login
相继输入用户名、密码、邮箱。回车出现
Logged in as maomincoding on http://registry.npmjs.org,那么就登陆成功了
3、上传发布
npm publish
第五步，插件下载使用
替代marquee标签的文字横向滚动Vue插件
1、安装
# install dependencies
npm i marquee-components
2、使用
在main.js引入
import marquee from 'marquee-components'
Vue.use(marquee );
在页面使用
<template>
<div id="app">
<marquee :val="msg"></marquee>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
}
}
}
</script>
val后加文字即可，当超过文本容器长度时，触动横向滚动效果。
第六步，npm包更新和撤销
1、撤销包
当你想撤销上传的包时，你可以看看下面的说明：撤销的坏处：
1、根据规范，只有在发包的24小时内才允许撤销发布的包。
2、即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了（即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了）
3、这里要说一点，取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为（试想一下你撤销了发布的包[假设它已经在社区内有了一定程度的影响]，这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情！）
所以，慎行！！！
撤销命令：
npm unpublish 包名 --force
送给你一句官方说的话
I sure hope you know what you are doing
2、更新包
看到了撤销的坏处，所以我推荐你更新包。更新包很简单，只需两步：
（1）、打开根目录下的package.json找到version字段
具体体现为："version":"a.b.c"
1.修复bug,小改动，c加1 2.增加了新特性，但仍能向后兼容，b加1 3.有很大的改动，无法向后兼容，a加1
（2）、根目录下输入npm publish
npm publish
结语
这里是以发布Vue插件为例，你也可以单独发布一个包。
1、输入命令
npm init
根据自己的情况输入然后回车，会自动生成一个package.json文件
{
"name": "vue-cli-configjs",
"version": "2.0.0",
"description": "vue.config.js by vue-cli3+",
"main": "vue.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"vue-cli-config"
],
"author": "maomincoding",
"license": "ISC"
}
2、然后建一个readme.md自述文件，用于说明
3、最后发布即可
npm publish
点击下方公众号，领取最新版红宝书
本文转转自微信公众号** 前端历劫之路**原创https://mp.weixin.qq.com/s/7tGMTOHCkq5BirTs1iEx6g，如有侵权，请联系删除。
