基于Vue的文字跑马灯组件(npm组件包)
一、前言
十余年的郊区网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整郊区建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“郊区网站设计”,“郊区网站推广”以来,每个客户项目都认真落实执行。
总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下:
印象中好像HTML标签的‘marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了‘marquee'标签
既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅!
二、用npm发布一个包
有点惭愧,之前通过npm install ...安装package包时,我是不知道package包存在哪里,在github上?折腾一番才知道是在npm上发布的。
2.1 npm发布包流程
进入官网,注册帐号
进入已经写好的组件, 登录npm帐号
执行npm publish,最先遇到问题好像是这个
这里注意的是因为国内网络问题,许多小伙伴把npm的镜像代理到淘宝或者别的地方了,这里要设置回原来的镜像。npm config set registry=http://registry.npmjs.org
后面又遇到
这里我还特意查了下ENEEDAUTH错误,可是却没看后面的提示:You need to authorize this machine using 'npm adduser'
所以这里需要npm adduser
(发布的包的名字也要注意,有可能会有重名问题,像我这个组件包本来取名为vue-marquee,后面在npm上搜到已经有这个包了,不过他做的是垂直方向的跑马灯。所以我把这个为了区分这个组件包是水平方向的,改名为vue-marquee-ho)
三、基于Vue的文字跑马灯组件
大致了解怎么发组件包以后,我们再来看看需要发布出去的组件包怎么写的。
3.1初始化组件
这里我还是用到vue-cli,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来,初始化该组件
vue init webpack vue-marquee-ho cd vue-marquee-ho cnpm install // 安装依赖包 npm run dev // 启动服务
3.2修改配置文件
首先看package.json
"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" },
因为这个组件包是能公用的,所以"private": false,
然后 "main": "dist/vue-marquee.min.js"
, 这里的配置意思是,别人用这个包 import VueMarquee from 'vue-marquee-ho'; 时,引入的文件。
可以看出,这个vue-marquee-ho最终需要打包出一个js文件,所以我们需要webpack.prod.config.js文件
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
可以看到我的output输出配置改了下,然后有很多webpack.prod.config.js之前不需要的代码去掉了,再看下对应的config配置,文件是config/index.js
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 },
至此配置差不多修改好了。接下来我们看看实现关键功能的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%);} }
即可完美实现跑马灯效果。
具体代码:
{{content}} {{content}}
js:
css:
我们知道 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:
效果:
五、总结
总算发布出去,能正常使用了!花了挺多时间的,虽然这个组件思路比较简单,但是说不定别人能用上呢。这个组件的雏形代码比现在多,不过之前在项目中直接引用也能正常使用。但是把他打包发布出去再使用的过程,出了很多问题,反复修改代码,精简代码,最终终于成功了!21次的提交记录,不容易呀,源代码地址:
vue-marquee-ho
以上所述是小编给大家介绍的基于Vue的文字跑马灯组件(npm 组件包),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
分享标题:基于Vue的文字跑马灯组件(npm组件包)
分享链接:http://pwwzsj.com/article/jihpss.html