100% { transform: translateX(-50%);}
}
</style>
我们知道 webpack.base.conf.js 中入口文件默认指定为：
entry: {
app: './src/main.js'
},所以，我们只需要将main.js引入Marquee.vue组件就可以。有两种方式引入：
import VueMarquee from './Marquee.vue'
export default VueMarquee;
// var VueMarquee = require('./Marquee.vue');
// module.exports = VueMarquee注意import 和module.exports不要一起用，github看到其他人提交的组件是这两个一起用的，这样在windows下会报错，好像mac不会有问题。
3.4 打包生成dist/vue-marquee.min.js
通过npm run build 即可看到目录下生成了dist文件，dist文件里有四个文件，分别是：
vue-marquee.min.js
vue-marquee.min.js.map
vue-marquee.min.css
vue-marquee.min.css.map我们知道有一个这样的文件.gitignore，里面包含npm install时，不会安装的东西，因为这里要用到dist文件，于是我把.gitignore 里的dist/去掉了。
.DS_Store
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*打包好了后，通过npm publish 提交到npm上
需要多次提交时注意修改package.json中的”version”: “1.2.1”, 我这里已经提交了21次了（捂脸哭(┬＿┬)）
四、使用组件
通过npm install vue-marquee-ho -s 安装到相应的项目下，安装成功如下图所示：
到项目中的node_modules/目录下将可以看到：
需要用到该组件时可以这样引入（注意引入样式）
import VueMarquee from 'vue-marquee-ho';
import Css from 'vue-marquee-ho/dist/vue-marquee.min.css'
export default {
name: 'app',
components:{
"vue-marquee": VueMarquee
},
}看一个demo:
<template>
<div id="app">
<div class="marquee-wrap" style="width: 100px;"><vue-marquee content="33333" class="two" :showtwo="false"></vue-marquee></div>
<div class="marquee-wrap" style="width: 100px;"><vue-marquee content="22222" class="two" :showtwo="false"></vue-marquee></div>
<div class="marquee-wrap" style="width: 100px;"><vue-marquee content="1" class="two" :showtwo="false"></vue-marquee></div>
