# vue入门

**Repository Path**: wite6666/vue_pro

## Basic Information

- **Project Name**: vue入门
- **Description**: vue学习的第一个项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue.js的入门项目
这是我学习vue.js的第一个项目，在项目里简单使用了一下webpack打包工具，搭建了vue的环境，使用了mui，mint等ui框架，完成了一些简单的业务逻辑。掌握了vue的基本使用。
### 该项目的功能
新闻模块，包括查看新闻详情，新闻列表，评论
图片模块，包括查看图片详情，图片列表，评论
购物模块，包括商品列表，查看商品详情，加入购物车，结账等功能
### 使用到的第三方库
* bootstrap
* mint-ui
* mui
* vue-preview
* vue-resource
* vue-router
* vuex
### 使用说明
导入到vs code或者webstorm上，打开终端，npm install来安装包，npm run dev2来启动项目。
### 项目搭建
由于我是自己使用的webpack搭建的vue环境，比较麻烦，使用vue-cli工具更加方便，具体看这篇博客https://www.cnblogs.com/cczlovexw/p/7691786.html
vue-resource的post请求，写在这里防止自己忘记
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/152131_3d61e170_2246086.png "捕获.PNG")
父子组件之间的传值
https://blog.csdn.net/qq_37570945/article/details/81187972
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/155216_7698872e_2246086.png "捕获1.PNG")
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/155226_6c76bf84_2246086.png "捕获3.PNG")
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/155549_a8ba8ef7_2246086.png "捕获4.PNG")
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/155559_4cd51af2_2246086.png "捕获5.PNG")
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/155609_00819612_2246086.png "捕获6.PNG")
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/155618_95c0c6b6_2246086.png "捕获7.PNG")
### 功能截图
* 主页
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160743_222265da_2246086.png "捕获.PNG")
* 新闻列表
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160816_1b070776_2246086.png "捕获3.PNG")
* 评论
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160828_51384bbb_2246086.png "捕获4.PNG")
* 图片列表
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160856_3fe7b809_2246086.png "捕获5.PNG")
* 商品列表
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160920_29f230c2_2246086.png "捕获6.PNG")
* 商品详情
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160934_c9e44e94_2246086.png "捕获7.PNG")
* 购物车
![输入图片说明](https://images.gitee.com/uploads/images/2019/0607/160948_ded6a121_2246086.png "捕获8.PNG")
### 声明
由于该项目仅做学习使用，所以数据和设计并不是十分完善，希望能跟大家带来一点思路。