# vue新项目

**Repository Path**: cpydevil/vue_new_project

## Basic Information

- **Project Name**: vue新项目
- **Description**: 这是第一次学习vue项目提交的代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第一个Vue的程序

## 这个项目主要是 vue 的第一次项目做的具体是什么我也不太清楚



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

3.设置路由高亮
    方法有两种
     1默认的高亮的属性是router-link-active 自己到style里面添加这么一个类，然后设置其属性值
     2到router.js里面的路由对象里面写一个 linkActiveClass: 'mui-active' 其含义就是说用mui-active来代替默认的router-link-active


4.点击tabbar中的路由链接，展示对应的路由组件


5.制作首页轮播图布局


6.加载首页轮播数据
    1.获取数据，如何获取呢，使用vue-resource
    2.使用vue-resource的this.$http.get获取数据
    3.获取到的数据，要保存到datashensahng
    4.使用v-for循环渲染每个item项

7.改造六宫格


8.改造新闻资讯路由链接

9.新闻资讯页面制作
 1.绘制页面，使用mui中的media-list
 2.使用vue-resource获取数据
 3.渲染数据页面