# vue-项目

**Repository Path**: dru/vue_project

## Basic Information

- **Project Name**: vue-项目
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-11
- **Last Updated**: 2022-04-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-test

> A Vue.js project

## Build Setup

``` bash
# 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

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```
## 测试git
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 1.用mui完成了header区域 并且重置了其样式
## 2.用mui完成了tabbar区域 
 + 修改mui tabbar的时候小图标是扩展的，需要将扩展的内容导入到assets文件当中
## 3.使用路由切换中间模块

## 4.改造tabbar 设置路由高亮 ，创建路由组件
## 5.引入首页轮播图的组件，改造首页轮播图组件的样式
 + 引入轮播图组件
```bash
#引入组件的方法
npm install mint-ui —S
#在main.js当中引入组件的样式
import 'mint-ui/lib/style.css'
#按需导入组件（example 轮播图 Swipe）
import { Swipe ,SwipeItem } from 'mint-ui'
#全局注册组件
Vue.component(Swipe.name , Swipe)
Vue.component(SwipeItem.name,SwipeItem)
```
 + 给轮播图添加动态数据
 ```bash
#1.获取数据使用vue-axios安装vue-axios的包
npm install vue-axios -S
#2.安装 axios 
npm i axios -S
#3.在main.js当中将组件引入
import VueAxios from 'vue-axios'
import axios from 'axios'
 #注册 vue-axios
Vue.use(VueAxios,axios)
#在你需要获取数据的界面当中使用axios
#注意在axios当中this的指向
 ```
 ## 6.九宫格的使用
 - 使用mui的九宫格布局改造出自己期望的样式布局
 ## 7.修改新闻的路由连接实现新闻列表
 - 1.制作新闻列表的页面 使用mui提供的样式
 - 2.获取新闻列表的数据
 - 3.将数据展示到页面上
 ## 8.修改新闻详情的路由连接