Vue项目结构分析

Vue项目结构如下：

项目结构

重点在src文件夹：

assets——静态资源，如css，js

components——公共组件

router——路由文件

App.vue——根组件

main.js——入口文件

1.index.html

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

index.html

2.App.vue

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

1) template

其中模板只能包含一个父节点，<router-view/>为<router-view></router-view>的简写，是子路由视图，后面的路由页面都显示在此处。

2) script

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

3) style

样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

App.vue

3.main.js

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。

main.js

第9行的router相当于router:router，为ES6写法，在对象中，如果键值对一样的话，可以简写为一个；

components: { App }引入根组件App.vue，App即App:App；

template: '<App/>' 是简写形式，等价于 <App></App>。

4.router

router下的index.js文件中的routes定义了路径为'/'的路由，该路由对应的页面是HelloWorld组件。

router

整个页面渲染过程：

访问http://localhost:8080/显示的就是index.html页面，index.html原本只有一个根结点id="app"。

index.html

main.js入口文件引入根组件App。

main.js

前边已说过，根组件App中，<router-view/>是子路由视图，后面的路由页面都显示在此处，访问http://localhost:8080/，路由为‘/’，根据路由文件index.js，所以引入HelloWorld组件。

main.js中的template: '<App/>'在html页面中添加<App></App>模板，模板内容即为HelloWorld组件内容。

App.vue router HelloWorld.vue

最后渲染出的html结构如下：

html结构

浏览器中F12用vue-devtools查看：