一、写在前面
据说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, 这是鄙人犯傻搞出来,后来想想当时这么做是相当蠢的)。本篇处置化项目就写到这里,太长大家看的也犯困,犯累。。我后面会一个一个页面,一个一个组件慢慢写,这让大家吐槽点就更多一点,不能在一篇文章里把槽点全吐完了。。。