vue init webpack vue-marquee-ho
cd vue-marquee-ho
cnpm install // 安装依赖包
npm run dev // 启动服务

 "name": "vue-marquee-ho",
 "version": "1.2.1",
 "description": "A Vue component to marquee",
 "author": "wangjuan",
 "private": false,
 "license": "MIT",
 "main": "dist/vue-marquee.min.js",
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js",
 "test": "node build/test.js"
 },
 "dependencies": {
 "vue": "^2.2.6"
 },
 "repository": {
 "type": "git",
 "url": "git+https://github.com/wj704/vue-marquee-ho.git"
 },

var webpackConfig = merge(baseWebpackConfig, {
 module: {
 rules: utils.styleLoaders({
  sourceMap: config.build.productionSourceMap,
  extract: true
 })
 },
 devtool: config.build.productionSourceMap ? '#source-map' : false,
 // output: {
 // path: config.build.assetsRoot,
 // filename: utils.assetsPath('js/[name].[chunkhash].js'),
 // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 // },
 output: {
 path: config.bundle.assetsRoot,
 publicPath: config.bundle.assetsPublicPath,
 filename: 'vue-marquee.min.js',
 library: 'VueMarquee',
 libraryTarget: 'umd'
 },
 plugins: [
 // http://vuejs.github.io/vue-loader/en/workflow/production.html
 new webpack.DefinePlugin({
  'process.env': env
 }),
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  },
  sourceMap: true
 }),
 // extract css into its own file
 new ExtractTextPlugin({
  // filename: utils.assetsPath('css/[name].[contenthash].css')
  filename: 'vue-marquee.min.css'
 }),
 new OptimizeCSSPlugin()
 ]
})
module.exports = webpackConfig

bundle: {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsPublicPath: '/',
 assetsSubDirectory: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 bundleAnalyzerReport: process.env.npm_config_report
 },

@keyframes marquee {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%);}
}

<template>
 <div class="marquee-box">
 <div class="marquee-content" ref="out">
  <p :class="run?speed:''">
  <span class="text1" ref="in" >{{content}}</span>
  <span class="text2" v-if="showtwo||run">{{content}}</span>
  </p>
 </div>
 </div>
</template>

<script>
 export default {
 name: 'VueMarquee',
 data (){
  return{
  run: false,
  pWidth: '',
  }
 },
 props: {
  content: {
  default: "暂无内容",
  type: String
  },
  speed: {
  default: 'middle',
  type: String
  },
  showtwo: {
  default: true
  }
 },
 mounted (){
  // let out = document.getElementById(this.pid.out).clientWidth;
  // let _in = document.getElementById(this.pid.in).clientWidth;
  var _this = this;
  this.$nextTick(()=>{
  let out = _this.$refs.out.clientWidth;
  let _in = _this.$refs.in.clientWidth;
  _this.run=_in>out?true:false;
  });
 }
 }
</script>

<style>
 .marquee-box {
 height: 50px;
 line-height: 50px;
 color: #000;
 font-size: 24px;
 background-size: 24px 24px;
 }
 .marquee-content{
 overflow: hidden;
 width:100%
 }
 .marquee-content p{
 display: inline-block;
 white-space: nowrap;
 margin: 0;
 font-size: 0;
 }
 .marquee-content span{
 display: inline-block;
 white-space: nowrap;
 padding-right: 40px;
 font-size: 24px;
 }
 .quick{
 -webkit-animation: marquee 5s linear infinite;
 animation: marquee 5s linear infinite;
 }
 .middle{
 -webkit-animation: marquee 8s linear infinite;
 animation: marquee 8s linear infinite;
 }
 .slow{
 -webkit-animation: marquee 25s linear infinite;
 animation: marquee 25s linear infinite;
 }
 @-webkit-keyframes marquee {
 0% { -webkit-transform: translate3d(0,0,0); }
 100% { -webkit-transform: translate3d(-50%,0,0); }
 }
 @keyframes marquee {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%);}
 }
</style>

entry: {
 app: './src/main.js'
 },

import VueMarquee from './Marquee.vue'
export default VueMarquee;
// var VueMarquee = require('./Marquee.vue');
// module.exports = VueMarquee

vue-marquee.min.js
vue-marquee.min.js.map
vue-marquee.min.css
vue-marquee.min.css.map

.DS_Store
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

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
 },
}

<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>
 <router-view></router-view>
 </div>
</template>
<script>
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
 },
}
</script>