使用Vue-cli构建项目，然后在src目录建立相应文件夹
目录结构大概如下
这个项目构建方式和vue-cli的默认构建方式有差别，原因是我要写两套界面（一套桌面端和一套移动端），而两套界面有一些公共的代码。
使用vue-cli构建多页面参考http://www.jianshu.com/p/0a30aca71b16
使用Vue搭建博客（一）——项目初始化
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
├── dist //dist
│ ├── index.html
│ └── m-index.html
├── package.json
├── package-lock.json
├── README.md
└── src
├── api //api接口的请求代码
│ ├── api.js
│ └── host.js
├── common //公共代码
│ ├── js
│ │ ├── dom.js //部分DOM操作，包含滚动和初始化目录
│ ├── less
│ │ ├── code-theme-dracula.css // Markdown 代码主题
│ │ └── variable.less // less变量
│ ├── reset.css // reset
│ └── typo.css // 文本排版css
├── components
│ ├── about //关于
│ │ ├── about-m.vue // -m表示移动端组件
│ │ └── about.vue
│ ├── archive //归档（标签页面）
│ │ ├── archive-m.vue
│ │ └── archive.vue
│ ├── article //文章展示界面
│ │ ├── article-m.vue
│ │ └── article.vue
│ ├── article-list //文章列表
│ │ ├── article-list-m.vue
│ │ └── article-list.vue
│ ├── back-top //回到顶部
│ │ ├── back-top-m.vue
│ │ └── back-top.vue
│ ├── comment //评论组件
│ │ └── comment.vue
│ ├── header //顶部
│ │ ├── header-m.vue
│ │ └── header.vue
│ ├── main //main组件
│ │ ├── main-m.vue
│ │ └── main.vue
│ ├── scrollbar //滚动条组件
│ │ └── scrollbar.vue
│ └── search //搜索页面
│ ├── search-m.vue
│ └── search.vue
├── pages //分别存放移动端入口文件和PC端入口文件
│ ├── index
│ │ ├── App.vue
│ │ ├── assets
│ │ ├── index.html
│ │ ├── index.js //入口文件
│ │ ├── router //路由
│ │ └── store //vuex
│ └── m-index
│ ├── App.vue
│ ├── assets
│ ├── m-index.html
│ ├── m-index.js //入口文件
│ ├── router
│ └── store
└── store //Vuex公共代码
├── getters.js
├── index.js
├── mutations.js
├── mutation-types.js
└── state.js