Vue2.0 入门实战一(初始化项目)

一、写在前面

据说vue 2.5已经发布了，更好的集成了Ts(TypeScript), 然并卵。。。，反正我是从vue2.0开始折腾的，这篇文章不是一个教程,只是作为一个Web beginner 给自己的折腾增加点乐趣。。，一直写代码会很烦躁，与其坐在电脑前2B一样的写代码，还边写边吐槽自己写的东西，不如写个bug让大家一起吐槽。。。

项目设计图

页面相当简单哈， 登录页，首页，详情页。。

二、准备工作

项目直接用的vue 官方的脚手架工具初始化的。所以机器上事先安装了node,和webpack（至于这俩玩意儿怎么安装请自行百度。。。。），顺着官方的提示一直往下撸,执行‘npm run dev’后，浏览器会自动打开初始化的项目，生成一个相当low的samble, low 不low看图就知道了。。

打开你的IDE，我这边用的是VS(Virtual Studio), 咱们还是先来看一下demo的目录结构

目录有很多，其实也不比惊方（慌）, 我们的代码主要是在src目录（当然这个目录你可以自行创建，然后在config 目录下的webpack.base.config进行相应的配置，不过这种费力不讨好的事情咱们就不折腾了）。OK, 搞清楚一个大概之后，我们就可以在这个事例项目中搞事情了。对 src目录进行开刀。。

三、开始码代码了

对官方的demo 进行小手术之后，src 目录结构如下图

因为我自己的这个项目的页面结构相当简单，一个公共的头部Header, 内容页公共的组件（components 目录）按时间筛选结果（Filter）, 筛选结果列表（List）,筛选结果汇总（Statistic），然后5个页面（pages, 请大家忽略Auth.vue, 这是鄙人犯傻搞出来，后来想想当时这么做是相当蠢的）。本篇处置化项目就写到这里，太长大家看的也犯困，犯累。。我后面会一个一个页面，一个一个组件慢慢写，这让大家吐槽点就更多一点，不能在一篇文章里把槽点全吐完了。。。