bundle: { env: require('./prod.env'), assetsRoot: path.resolve(__dirname, '../dist'), assetsPublicPath: 'https://www.jb51.net/', assetsSubDirectory: 'https://www.jb51.net/', productionSourceMap: true, productionGzip: false, productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report },
至此配置差不多修改好了。接下来我们看看实现关键功能的Marquee组件
3.3 Marquee组件
思路：标签里的文字所占的宽度超过外面的div宽度时，增加一个内容相同的标签。这里span标签设置为display: inline-block;，可以计算其宽度，把span标签外面的父元素设置为font-size: 0;display: inline-block;，父级元素的宽度即为两者宽度之和，也就是一个span标签宽度的两倍，然后将其父级元素通过CSS3动画设置：
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%);} }
即可完美实现跑马灯效果。
具体代码：
<template> <div> <div ref="out"> <p :class="run?speed:''"> <span ref="in" >{{content}}</span> <span v-if="showtwo||run">{{content}}</span> </p> </div> </div> </template>
js:
<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>
css:
<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>
我们知道 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: