gcapp-search-hello
vue-marquee
A Vue component to marquee
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
使用组件
通过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>
<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>
效果:
For detailed explanation on how things work, checkout the guide
构建过程,见 guide
Dependencies
Dependencies
autoprefixer: ^6.7.2babel-core: ^6.22.1babel-loader: ^6.2.10babel-plugin-transform-runtime: ^6.22.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0file-loader: ^0.11.1friendly-errors-webpack-plugin: ^1.1.3html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3webpack-bundle-analyzer: ^2.2.1semver: ^5.3.0shelljs: ^0.7.6opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.2.0rimraf: ^2.6.0url-loader: ^0.5.8vue-loader: ^11.3.4vue-style-loader: ^2.0.5vue-template-compiler: ^2.2.6webpack: ^2.3.3webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.18.0webpack-merge: ^4.1.0