Vue.jsVue学习vue

Vue项目结构分析

2019-03-04  本文已影响0人  我的木

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查看:

上一篇下一篇

猜你喜欢

热点阅读