尝试使用Vue.js(一)文件划分

尝试使用Vue.js(一)文件划分

用‘vue’尝试写了个小Demo,熟悉一下vue的流程,和vue生态圈里的‘vue-router’、‘vuex’等。
Demo的在线预览地址
[Demo的github代码地址][2]


  • 前端组件化开发,一直受到广大前端开发的追捧,在比较流行的几个框架里如“react”、“vue”、“angular2.0”都使用组件化开发的模式。

  • vue是一个“渐进式框架”,也就是说‘vue’对项目的约束性不大,你可以只用在视图层,也可以去全站vue,在你网站的某个一个页面,或者某一个模块使用vue都是可以的。

本文先介绍下代码的整体文件划分

  1. 项目是用了‘vue-cli’脚手架生成的(官网提供,用起来很不错)
  2. 在vue-cli的基础上进行了一些改动(注意集中在src中)

下面看下src文件夹下的结构(*标记的是vue-cli基础上加的):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
├── App.vue (vue的顶层组件)
├── assets (静态文件)
│   ├── images (静态文件-图片)
│   └── scss (静态文件-样式,包括icon字体、rem函数等)
├── cache (* 统一存放接口,方便接口的维护和管理)
│   └── cache.js (接口文件)
├── common (*统一存放一些公共数据和方法)
│   ├── constant (*一些全局的常量)
│   └── util (*一些公共的方法)
├── components
│   ├── CitySelect.vue
│   ├── GoTop.vue
│   ├── Header.vue
│   ├── Hello.vue
│   ├── LoadMore.vue
│   ├── Loading.vue
│   └── MessageList.vue
├── main.js
├── pages
│   ├── about.vue
│   ├── happy.vue
│   ├── index.vue
│   ├── robot.vue
│   └── weather.vue
├── router (*单独维护touter,方便修改)
│   └── router.js
└── store (vuex的维护)
└── index.js

从上面可以看出,主要增加的是“cache” “common” 这两个文件,在开发过程中,接口的单独维护,和公共代码提取到“cmmon”文件中是一个比较好的习惯。

把配置文件、公共文件、或者某个单独功能(如router、store这种)这些文件单独维护,都是比较好的文件划分,对后期改动,维护都比较方便。

[2]: https://github.com/shaqihe/life-app-vue

作者 [@sha Qihe]

2016 年 10月 11日