github下载MUI:https://github.com/dcloudio/mui
克隆方法 git clone <mui地址>
第一步:
1.先从github 拉取 mui 的 dist 文件夹
2. 将dist文件夹里面的 三个文件夹 放置在自己的 assist/lib/mui/ 里面 如下:
第二步: 在根目录打开 main.js
加入如下代码:
import './assets/lib/mui/css/mui.css'
import mui from './assets/lib/mui/js/mui.js'
Vue.prototype.mui = mui;
第三步: 在当前项目需要安装2个依赖包
命令如下:
npm install @babel/plugin-transform-modules-commonjs -D
npm install @babel/plugin-transform-strict-mode -D
如果安装好了,会在package这样显示:
第四步
打开 babel.config.js 代码添加
plugins: [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties",
[
"@babel/plugin-transform-modules-commonjs", {
"strictMode": false
}
]
]
第五步:
打开 router.js 新建 test 路由:
{
path: "/test",
name: "test",
component: () => import("./views/Test.vue")
}
在views 文件夹下新建 Test.vue :
<!-- 模版 -->
<template>
<div class="container">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-content">
*写需要滚动的内容
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
this.mui(".mui-scroll-wrapper").scroll({
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
})
},
}
</script>
<style lang="stylus" scoped>
.container
position relative
float left
width 100%
height 500px
.mui-content
height 900px
text-align center
padding 30px 0
background -webkit-linear-gradient(#fff, #f60)
</style>
第六步
重启服务器 就可以使用了
大功告成!
喜欢的话,点个收藏,加个关注哟,
如果配置中有什么问题欢迎评论哟,