VueJs入门项目实战

前言

由于最近手上的一个项目刚刚完结 ，所以现在处在一个比较闲的状态 ，想着真的这样休息这也不是一个事，所以就琢磨着学点什么？

于是立马就像到了当前火热的一些前端框架 ，如：ReactJs ，AngularJs ，VueJs 等! 其实在之前闲暇的时间里面也多少的去接触过这些框架 ，

但是仅仅处于一个了解的状态 ，算是比较零散吧！并没有用一个完整的Demo去更加系统的了解它们的各种特性 。

所以这一次打算选取其中一个框架，用一个完整的实例来走以遍 ，对于这三大框架的差异和选取这里就不过多的赘述，网上已经有很多相关的文章和帖子了，经过一番思考后最终我选择了拥抱Vue.js 。

其实此时使用Vue.js全家桶的一个完整的Demo已经完成了，接下来会记录一些列对该项目的一些体会 ，从刚刚开始环境的搭建到编写代码，中间所遇到的困难，以及到最后的打包和发布等。仅仅作为对这个项目的一个总结和技术的沉淀，也便于以后自己方便查找相关的知识 ，或许也可能给一些也想用一个完整的项目来学习Vue.js的童鞋带去一点微不足道的帮助。

该项目是模仿豆瓣集市的web端来写的，一个是自己的电商这一块有一中莫名的情愫吧！还有一个就是对于豆瓣的设计风格也比较情有独钟，so 打算就以它来作为这个demo,因为真的是你很喜欢的事情你去做起来才不会觉得那么累，才有动力和兴趣，也能更好的去坚持。因为我之前常常做到一半就不想做了 ，大部分都是半途而废，也毕竟是业余的学习，所以也不会那么强逼这自己。

技术栈(第一版)：

1. vue2 

2.vue-router2

3.axios

4.webpack

5.es6

 

基于上面的一个技术栈做完之后 ，在考虑要不要把vuex加入进来 ，感觉现在大部分一搞就是全家桶啊 ！咱们不来一个全家桶感觉会被人看不起和鄙视的 ，哈哈 ！

上面只是一个玩笑啊！也不是说单纯的追时髦，之所以加进来的原因有两个 ，一个是：通过整个项目下来发现确实有些状态用的地方挺多的，一多起来管理起来就不是那么容易了 ，为了统一便于管理, 二个是：想学习和体验一下vue的全家桶到底是什么感觉 。所以后面就在之前的基础上加上了vuex来进行对项目的状态的管理。

技术栈(第二版):

1. vue2 

2.vue-router2

3.vuex

4.axios

5.webpack

6.es6

 结语

最后附上本文的Demo和源代码，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星，您的鼓励就是我的动力！^_^

demo在线预览 github源代码

 

转载于:https://www.cnblogs.com/wuwc/p/6598652.html