Vue实践案例

讲解完了整个vue，我们可以使用已经学习的知识自己做一个项目。项目可以综合锻炼知识整合能力，希望大家都可以认真做项目。

16.1 项目简介

该项目是一个网上汽车销售系统，有后台管理，和前台销售界面。

16.1.1 业务要求

第一部分：前端销售

• 注册用户

• 登录和忘记密码

• 商品浏览

• 查看商品详情

• 添加购物车

• 立即购买

• 支付

第二部分：后台管理

• 基础数据管理（供应商管理，品牌管理，商品管理）

• 订单管理

• 权限管理

• 售后管理

• 报表

16.1.2 项目效果

1、注册

图16- 1 注册效果图

2、 登录

图16- 2 登录效果图

3、 商品详情页

图16- 3 商品详情页

4、 商品添加购物车

图16- 4 添加到购物车

添加到购物车有数量消息提示。但是如果没有登录的话则不能添加到购物车。

5、 购物车

图16- 5 购物车界面

6、 后台订单管理

16.1.3 核心代码

1、移动端组件库的使用

官方文档：http://mint-ui.github.io/#!/zh-cn

第一种：全局使用

第一步：先安装

npm install mint-ui -S

第二步：在main.js中引用

//导入mint-ui

import Mint from 'mint-ui';

import 'mint-ui/lib/style.css'

Vue.use(Mint);

第二种：按需使用

第一步：安装同上

第二步：安装 babel-plugin-component：

npm install babel-plugin-component -D

注：借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

第三步：修改.babelrc

{

"presets": ["env", "stage-0"],

"plugins": [["component",[{"libraryName": "mint-ui","style": true}]]]

}

2、 商品列表

3、 商品详情页

4、 购物车

16.2 项目意义

首先告诉大家，做项目并不是一件简单的事情。为何如此说呢，因为在接到分配的任务后，首先要思考的是，我做的是什么业务，这个业务的意义目的在哪里，这一块的功能给客户提供什么样的方便，业务流程如何走下去，才更能深入到客户的心里。这只是初期的头脑风暴。后续业务流程稳定下来，该思考的是，为了使我的业务流程按照思路正常走下去，应该如何有效的建立各个数据表，从此处我们发现，必须先了解深入业务，才可以确定数据表，所以大家不要着急敲代码，而应该深思熟虑方可敲代码。

其次，敲代码的过程中，又有了更清醒的觉悟，那就是所学习的知识不足以支撑完成整个项目，所以说写项目的过程是一个自我积极学习的过程而不是老师被动输入的过程，前者的学习更能内化自己专业方面的知识，提高学习的能力，所以每个人都要积极的写项目。

最后，写项目不仅是自我积极学习的过程，也是打怪兽的过程，这个怪兽就是令人抓狂的bug。我们发现一个bug解决了，另一个bug接踵而至，跟事先约好了似的，令你头疼。此时此刻，此情此景，我知道，你想放弃，放弃是一个正常人面对挫折做出的自我保护的下意识的行为，所以，不是你懦弱，也不是你逃避，这是所有人都会做出的选择，但是，此时此刻，我劝你别着急放弃，先冷静，这个时候，我希望你的叛逆汹涌而出，别人放弃，那我偏偏要与众不同，我非要与bug死磕到底，这个思想如果出来了，那你就开始前进了，进步就是在一念之间，所以，请珍重。

以上所叙述，是做项目的部分心理过程，其实过程是丰富多彩的，比如说，终于出来一个效果了，那我放松一会儿吧，结果“一会儿”变成了一天的游戏打杀，等等等等过程，我希望大家有更丰富的过程，经历了，总结了，反省了，那就是你的财富。但是依然要说一句，了解你的诱惑（例如看电子小说，是你控制不住花费大量时间的），规避自己的行为，认真对待，彻底执行，完成项目，因为项目真的是一个不可多得的浴火重生的机会。

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。