# webpack-vue1

**Repository Path**: wzxtarget/webpack-vue1

## Basic Information

- **Project Name**: webpack-vue1
- **Description**: 测试
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是项目说明文档


## 用命令行把代码提交到码云

1.git add .
2.git commit -m "提交信息"
3.git push

## 第二种用vs code编辑器（可视化操作）

## 制作首页App.vue
1.header区域，使用mint-ui中的Header组件(mint-ui为基于vue的移动框架，所以用npm安装)
2.底部Tabbar，使用MUI的Tabbar.html（直接下载库使用导入）
  制作图标时要导入图标的css文件，及ttf文件
  tabbar通过路由切换到不同组件，选中高亮显示
3.Tabbar切换动画
  进去状态从右边进来，出来状态向左出去
  
## 制作顶部横向滑动条
1.使用mui的tab-top-webview-main模板
2.把class为mui-fullscreen去掉
3.是js组件需要初始化，在组件中导入js文件并初始化它
4.滑块依然无法滑动并报错，因为mui.min.js无法兼容webpack的严格模式
  要去除严格模式，则需要：
  1安装插件：cnpm i babel-plugin-transform-remove-strict-mode -D
  2.babelrc 文件添加配置 “plugins”: [“transform-remove-strict-mode”]
  3若上诉方法不成功，再.bablerc中配置，让项目忽略第三方js的转码。
   "ignore": ["./src/lib/mui/js/*.js"]
5.滑动条可以滑动之后，发现tabbar无法切换了，解决办法是将tabbar的class  mui-tab-item
  换一个类名，样式同.mui-tab-item一样(浏览器中复制)