项目结构

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
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── dist							//生产版本（build构建，经过webpack打包）
│   ├── index.html
│   └── static
│       ├── css
│       ├── img
│       └── js
├── index.html						//入口文件（可添加meta标签）
├── package.json					//项目配置
├── src								//开发的主文件夹
│   ├── App.vue						//项目主文件
│   ├── Global.vue					//用于设置全局变量
│   ├── assets						//一些杂项，如静态文件和脚本
│   │   ├── cup@2x.jpg
│   │   ├── eventBus.js
│   │   ├── finish@2x.png
│   │   ├── index_background@2x.jpg
│   │   ├── lock@2x.png
│   │   ├── lock@3x.png
│   │   ├── logo.png
│   │   ├── oval-big@2x.png
│   │   ├── oval-small@2x.png
│   │   ├── tick-white.png
│   │   └── tick@2x.png
│   ├── components					//组件存放
│   │   ├── bookInfo.vue
│   │   ├── chapProgress.vue
│   │   ├── chapter.vue
│   │   ├── choice.vue
│   │   ├── feedBack.vue
│   │   ├── note.vue
│   │   ├── progressButt.vue
│   │   └── quizHeading.vue
│   ├── main.js						//项目的核心文件(包含模块的导入)
│   ├── router						//项目路由
│   │   └── index.js                
│   └── views						//页面
│       ├── bookIndex.vue
│       ├── finish.vue
│       ├── progress.vue
│       └── question.vue
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    └── unit
        ├── jest.conf.js
        ├── setup.js
        └── specs

其他文件介绍参考Vue-cli 安装和目录结构解析

视图/组件关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├──bookIndex			//书首页
│  ├──bookInfo			//顶部卡片信息
│  └──chapter			//章节条
│
├──progress				//章节进度页
│  ├──chapProgress		//章节进度气泡
│  └──progressButt		//导航按钮
│
├──question				//答题页面
│  ├──quizHeading		//题目及进度信息
│  ├──feedBack			//反馈环节卡片
│  ├──choice			//选择题卡片
│  └──note				//笔记信息卡片
│
└──finish				//完成页面

运行项目

1
2
3
4
5
6
7
8
9
10
11
# clone源码
git clone https://Seagull_papa@bitbucket.org/systemthinking/reader-vue.git

# 安装npm
npm install

# 构建生产版本
npm run build

# 构建开发版本
npm run dev

项目依赖

具体参见/package.json中”dependencies”

1
2
3
4
5
6
7
8
9
"dependencies": {
  "animate.css": "^3.5.2",				//动画库
  "axios": "^0.17.1",
  "less-loader": "^4.0.5",
  "vue": "^2.5.2",
  "vue-loading-template": "^0.1.7",		//加载动画
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1"						//Vue的状态管理，在项目变得复杂时可能用到
}

可能用到的文档