src : 放置组件和入口文件
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| src
├─assets // 静态资源，如css，js
├─js
│ │ app.vue // App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。
│ │ main.ts // 为vue项目的入口文件，加载了各种公共组件(需要引用和初始化组件实例)。比如app.vue
│ │
│ ├─components // 公共组件
│ │ │ base-vue.ts
│ │ │ class-menu.vue
│ │ │ header.ts
│ │ │ header.vue
│ │ │ index.ts
│ │ │ notice.vue
│ │ │ search-input-tags.vue
│ │ │ search-input.vue
│ │ │ tag-selector.vue
│ │ │
│ │ └─base
│ │ table-list.vue
│ │
│ ├─filters
│ │ index.ts
│ │
│ ├─models
│ │ index.ts
│ │
│ ├─modules
│ │ │ data-library.service.ts
│ │ │ message-center.vue
│ │ │ notification-list.vue
│ │ │
│ │ ├─collection
│ │ │ collection-selector.vue
│ │ │ collection.vue
│ │ │
│ │ ├─collection-detail
│ │ │ collection-detail.vue
│ │ │
│ │ ├─complete-attrs
│ │ │ fix-attrs.vue
│ │ │
│ │ ├─dataset-detail
│ │ │ dataset-confirm.vue
│ │ │ dataset-detail.vue
│ │ │
│ │ ├─draft
│ │ │ draft.vue
│ │ │
│ │ ├─import-data
│ │ │ index.vue
│ │ │ result.vue
│ │ │ search.vue
│ │ │
│ │ ├─index
│ │ │ index.vue
│ │ │
│ │ ├─search-index
│ │ │ search-index.vue
│ │ │
│ │ ├─search-result
│ │ │ dataset-table-name.vue
│ │ │ dataset-table-update-time.vue
│ │ │ dataset-table.vue
│ │ │ search-result.vue
│ │ │
│ │ └─user-mgmt
│ │ access-key-dlg.vue
│ │ account-security.vue
│ │ user-mgmt.service.ts
│ │
│ ├─routes // 路由文件
│ │ router.ts
│ │
│ ├─store
│ │ │ index.ts
│ │ │ types.ts
│ │ │
│ │ └─search
│ │ actions.ts
│ │ getters.ts
│ │ index.ts
│ │ mutations.ts
│ │ types.ts
│ │
│ └─utils
│ │ constants.ts
│ │ dataset.attr.utils.ts
│ │ deferred.js
│ │ el.utils.js
│ │ eventBus.js
│ │ func.utils.js
│ │ func.utils.ts
│ │ http.utils.js
│ │ index.ts
│ │ resize.js
│ │ tag.utils.ts
│ │ track.utils.js
│ │
│ └─interceptors
│ http-auth.intcp.js
│ http-error.intcp.js
│ http-mock-data.intcp.js
│ http-session.intcp.js
│ http-track-event.intcp.js
│ index.js
│ router-analysis.hook.js
│ router-meta.hook.js
│ router-reload.hook.js
│
├─scss
│ basic.scss
│ style.scss
│ _dataset-detail.scss
│ _header.scss
│ _search-input.scss
│ _table-list.scss
│ _tag-selector.scss
│
└─types
shims-tsx.d.ts
shims-vue.d.ts
|
mian.ts(main.js)
主要是引入 vue 框架，根组件及路由设置，并且定义vue实例。
1
2
3
4
5
6
7
8
9
10
11
12
| import App from './App'
import router from './router'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
|
new Vue的参数，解释如下：
- el：官方解释为实例提供挂载的元素。此处为
index.html 中的 <div id="app"><div>。
- router：为
router:router 的简写，指向引入文件中的 routes:[]
- components：注册哪些组件，需在顶部引入文件。
- template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用 template 替换
index.html 里面的 <div id="app"></div>
render: h => h(App) 代码分解
将 render: h => h(App) 根据 es6 语法分解为：
1
2
3
4
| render: h => h(App);
render: h => {return h(App);}
render: function(h) { return h(App);}
render: function(createElement) { return createElement(App); }
|
然后再看 vue2.0 官方文档，对 render 方法的描述如下：
render
类型：(createElement: () => VNode) => VNode
详细：
字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
参考：渲染函数
说明：render是一个方法，自带一个形参createElement，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上
App.vue
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
template
其中模板只能包含一个父节点，<router-view/> 为 <router-view></router-view> 的简写，是子路由视图，后面的路由页面都显示在此处。
script
vue 通常用 es6 来写，用 export default 导出，其下面可以包含数据 data，生命周期(mounted等)，方法(methods)等。
style
样式通过style标签 <style></style> 包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加 scoped，比如 <style scoped></style>
router
router 下的 index.js 文件中的routes定义了路径为’/‘的路由，该路由对应的页面是HelloWorld组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| impore Vue from 'vue'
import Route from 'vue-route'
import HelloWord from '@/components/HelloWord'
Vue.use(Route)
export default Route({
routes: [
{
path: "/",
name: "HelloWord",
component: HelloWord,
}
]
})
|
publice
index.html
index.html 如其他 html 一样，但一般只定义一个空的根节点，在 main.js 里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
为vue项目默认首页，里面默认引用了app.vue根组件,vue编译后的html文件入口
node_modules：项目锁依赖的模块/包
config：配置了路径端口值等
build：配置webpack的基本配置、开发环境配置、生产环境配置等
整个页面渲染过程：
- index.html
- main.js
- App.vue
访问http://localhost:8080/显示的就是index.html页面，index.html原本只有一个根结点id="app"。
1
2
3
4
5
6
| //index.html
<html>
<body>
<div id="app"><div>
</body>
</html>
|
main.js 入口文件引入根组件 App，也就是 App.vue。根据代码 new Vue()，根组件会被渲染挂载在 index.html 的 <div id="app"><div> 上
1
2
3
4
5
6
7
8
9
10
11
|
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
|
根组件 App(App.vue) 中， <router-view/> 是子路由视图，后面的路由页面都显示在此处，访问http://localhost:8080/，路由为‘/’，根据路由文件app.vue，引入HelloWorld组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<template>
<router-view />
</template>
export default Route({
routes: [
{
path: "/",
name: "HelloWord",
component: HelloWord,
}
]
})
|
main.js中的template: <App/>。模板内容渲染之后即为HelloWorld组件内容。