# vue练习

**Repository Path**: gmydevloper/vue_practice

## Basic Information

- **Project Name**: vue练习
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-07
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cms

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


### 哈哈哈哈哈哈

## 用(传统方式)把修改的代码上传到码云？？？
1. git add .
2. git commit -am '提交信息'
3. git push

## 制作首页App组件
1. 完成 Header 区域，使用的是Mint-UI中的Header组件
2. 制作底部的 Tabbar 区域，使用的是MUI 的 Tabbar.html + 在制作 购物车 小图标的时候，操作相对多一些；
    + 先把 扩展图标的css 样式，拷贝到项目中
    + 拷贝 扩展字体库 ttf文件，到项目中
    + 为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`
3. 要在 中间区域放置一下 router-view 来展示路由匹配到的组件

## 改造tabbar 为router-link

## 设置高亮

## 点击tabbar 中的路由连接，展示对应的路由组件

## 轮播图
1. 获取数据，如何获取呢，使用 vue-resource
2. 使用 vue-resource的 this.$http.post 获取数据
3. 获取到的数据，要保存到data神身上
4. 使用 v-for 循环渲染 每个 item 项